:root {
            --primary-color: #4e54c8;
            --secondary-color: #8f94fb;
            --accent-color: #F15A29;
            --text-color: #000;
            --bs-heading-color:#000;
            --nav-color: #fff;
            --light-color: #f8f9fa;

            --vizru-highlight-color: #F15A29;
            --vizru-text-color: black;
            --vizru-body-color: #000000;
            --vizru-testimonial-bg: #F9F6F1;
            --vizru-highlite-color:#F15A29;
        }

        .btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(252, 95, 43, 1);
    --bs-btn-border-color: rgba(252, 95, 43, 1);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(252, 95, 43, 1);
    --bs-btn-hover-border-color: rgba(252, 95, 43, 1);
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-border-color: #ffc720;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ffc107;
    --bs-btn-disabled-border-color: #ffc107;
} 
      html {
        font-size: 16px;
      }  
        body {
            font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
            color: var(--text-color);
            
        } 
        .custom-btn,
        .nav-link,
        .genai-content > p.small,
        .banner-button,
        .section-small-text,
        .footer-heading,
        .vizru-guide-pill,
        .vizru-guide-link,
        .strategic-lead-section .innovation-blur-box,
        .sub-breadcrumb{
          font-family: "Geist Mono", monospace;
        }
        

        .small, small {
    font-size: 0.766em;
}

        section h3{
            font-weight: 500;
        }

        p {
    font-size: 1em;
    font-weight: 300;
}
        
a:hover {
    color: rgba(252, 95, 43, 1);
}
/* 1. Medium Bold, 50px */
.text-50-medium {
  font-size: 3.125rem; /* 50px */
  font-weight: 600;   /* Medium Bold */
  line-height: 1.2;
}
.text-50-regular {
  font-size: 3.125rem; /* 50px */
  font-weight: 400;  
  line-height: 1.2;
}

/* 2. Light, 40px */
.text-40-light {
  font-size: 2.5rem;  /* 40px */
  font-weight: 300;   /* Light */
  line-height: 1.3;
}
.text-35-light {
  font-size: 2.333em;  /* 35px */
  font-weight: 300;    
  line-height: 1.3;
}

/* 3. Regular, 24px */
.text-24-regular {
  font-size: 1.5rem;  /* 24px */
  font-weight: 400;   /* Regular */
  line-height: 1.4;
}

.text-28-medium {
  font-size: 1.75rem;   /* 28px */
  font-weight: 500;     /* Medium */
  line-height: 1.4;     /* Adjust as needed */
}


/* 4. Semi Bold, 18px */
.text-18-medium {
  font-size: 1.125rem; /* 18px */
  font-weight: 500;    /* Semi Bold */
  line-height: 1.5;
}

/* 5. Regular, 45px */
.text-45-regular {
  font-size: 2.8125rem; /* 45px */
  font-weight: 400;     /* Regular */
  line-height: 1.2;
}

      


        /* Mega menu base */

        .dropdown-menu.navbar-mega-menu {
    padding: 0 !important;
    border: none;
}


        .navbar.navbar-scrolled{
              background-color: rgb(47 47 47 / 70%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
        }

         .navbar.navbar-scrolled .mobile-menu >ul{
          background-color: transparent;
         }
       
        .navbar-body{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }
        .navbar>.container{
          position: relative;
        }
.custom-btn{
        background-color: var(--vizru-highlite-color);
    border-radius: 4px;
    color: #fff;
    text-transform: uppercase;
    border: none;
    padding: 10px 12px;
    min-width: 130px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    column-gap: 10px;
}
.custom-btn.btn-text-flip{
  perspective: 1000px;
}
.btn-text-flip span {
    position: relative;
    display: inline-block;
    padding: 0;
    transition: transform .5s;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
}
.btn-text-flip:hover span {
    transform: rotateX(90deg) translateY(-12px);
    color: inherit;
}
.btn-text-flip span:before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    content: attr(data-text);
    transition: color .5s;
    transform: rotateX(-90deg);
    transform-origin: 50% 0;
    text-align: center;
    font-size: 0.9em;
}
.custom-btn:hover{
  color: #000;
  /* animation: jump 0.6s ease; */
  background-color: var(--vizru-highlite-color);
}
.chat-btn img{
  width: 21px;
  transition: transform 0.3s ease;
}
.chat-btn:hover img {
  animation: jump 0.6s ease;
}

@keyframes jump {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-6px); }
  50%  { transform: translateY(0); }
  70%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
   
.navbar-mega {
  position: static;
}
.navbar-collapse {
    flex-grow: unset;
}
.nav-menu-items-holder{
  text-align: center;
  width: 100%;
}

.nav-link {
        padding-top: 14px;
    padding-bottom: 15px;
    color: #fff;
    
        text-transform: uppercase;
    font-weight: 400;
}

.mobile-menu{
  margin-top: 10px;
}

.navbar-mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;          
  width: 100%;
  
  padding: 2rem 0;
  display: none;
  z-index: 999;
  
}
.navbar-mega-menu .card-body {
    padding-left: 0;
}

.navbar-mega-menu a {
    color: #000;
    text-decoration: none;
}
.navbar-mega-menu .card-img-top{
  border-radius: 10px;
}

.navbar-mega-menu-body{
    border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  background: #fff;
  width: 100%;
}

nav.navbar {
  padding-top: 0;
    padding-bottom: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 123;
   
}
.mobile-menu >ul{
      background-color: rgb(47 47 47 / 70%);
    border-radius: 43px;
    /* backdrop-filter: blur(12px); */
    -webkit-backdrop-filter: blur(12px);
    padding-right: 15px;
    padding-left: 15px;
}




/* Cards inside mega menu */
.navbar-mega-menu .card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.navbar-mega-menu .card:hover {
  transform: translateY(-4px);
}


/* Right-side links */
.mega-menu-right-solutions{
  background-color: rgba(248, 246, 242, 1);
  display: flex;
    align-items: center;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 20px;
}

.mega-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.mega-links li {
  padding-bottom: 10px;
    border-bottom: 0.5px solid rgba(255, 211, 192, 1);
}
.mega-links li:last-child {
  border-bottom: none;
}
.mega-links li a {
  text-decoration: none;
  font-weight: 400;
  color: #111;
  transition: color 0.2s;
  font-size: 1.067em;
  display: flex;
    justify-content: space-between;
}
.mega-links li a i{
  font-size: 0.867em;
}
.mega-links a:hover {
  color: #f15a29;
}

    .custom-solution-left,
    .industries-megamenu-left {
        padding: 20px 33px;
        padding-top: 25px;
    }
 .navbar-menu{
    display: flex;
    justify-content: flex-end;
  }
  .device-menu{
        position: absolute;
    width: 100%;
    top: 50px;
    max-height: calc(100vh - 50px);
    overflow: auto;
  }
/* Apply only on lg and above */
@media (min-width: 992px) {
  .custom-solution-row {
    display: flex;
  }

  .navbar-menu{
    display: flex;
    justify-content: space-between;
  }


  .custom-solution-left {
    flex: 1; /* take remaining width */
    max-width: calc(100% - 300px);
  }

  .custom-solution-right {
    flex: 0 0 300px; /* fixed width */
    max-width: 300px;
  }
}



/* Base style for mega menu */


/* Industry links */
.industries-megamenu-content{
  display: flex;
  gap: 30px;
}
.industries-megamenu-left,
.industry-submenu-body{
  display: flex;
}
.industries-megamenu-left{
  flex-direction: column;
  padding-bottom: 35px;
}
.industry-link {
  display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #111;
    padding: 0.25rem 0;
    font-weight: 400;
    font-size: 1.067em;
    transition: color 0.2s;
    width: 100%;
    justify-content: space-between;
}
.industry-link:hover {
  color: #f15a29;
}
.industries-megamenu-text-block{
  height: 100%;
  background-image: url('../img/menu-graphics.webp');
  background-size: cover;
  border-radius: 10px;
  overflow: hidden;
}
.industry-menu-links > .row > .col{
  padding-right: 40px;
}

.megamenu-industries-right {
    background-image: url(../img/megamenu-graphics1.webp);
    background-repeat: no-repeat;
    background-position: 193px -1px;
    background-size: 137px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding-left: 24px;
    background-color: #f8f6f2;
    width: 280px;
    flex: 0 0 280px;
    padding-bottom: 27px;
}

.megamenu-industries-right h2{
    font-size: 3.933em;
}

.megamenu-industries-right p{
    font-size: 1.867em;
    line-height: 1.3em;
        text-align: left;
        font-weight: 400;
}

.industries-megamenu-first-section{
  width: 222px;
    flex: 0 0 222px;
}




.banner-container {
            position: relative;
            overflow: hidden;
            height: 100vh;
            max-height: 800px;
        }

        .banner-slider {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .banner-slider-item {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 0.5s ease;
                display: flex;
    align-items: center;
        }
        .banner-slider-item:after {
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 12;
        }

        .banner-slider-item.active {
            opacity: 1;
        }
        .banner-slider-item .container{
          position: relative;
          z-index: 13;
          display: flex;
          gap: 30px;
          justify-content: flex-start;
          margin-bottom: 35px;
        }

        .banner-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 12;
            position: absolute;
        }

        .banner-content {
            width: auto;
            height: auto;
            
            z-index: 12;
        }

        .banner-letter {
            font-size: .85em;
            font-weight: 300;
            /* margin-bottom: 10px; */
        }

        .banner-title {
            line-height: 1.2em;
                font-size: 2rem;
    font-weight: 400
        }

        .banner-paragraph {
    margin-bottom: 20px;
    letter-spacing: 0.06em;
    font-weight: 300;
        }

        .banner-button {
              text-decoration: none;
    background-color: var(--vizru-highlite-color);
    color: white;
    border: none;
    padding: 15px 20px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    width: 100%;
    text-transform: uppercase;
        }
        .banner-button:hover {
          color: #fff;
        }

        .banner-thumbnail {
               position: absolute;
              bottom: 20px;
              right: 0;
              width: 230px;
              height: 80px;
              background-size: 100px;
              background-position: left;
              border: 2px solid white;
              display: flex;
              color: white;
              font-size: 0.9em;
              background-color: rgb(0 0 0 / 21%);
              background-repeat: no-repeat;
              border: 3px solid rgb(0 0 0 / 21%);
        }

        
.banner-thumbnail-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}
        .banner-loader {
            position: absolute;
            bottom: 0;
            right: 150px;
            width: 100%;
            height: 5px;
            background: transparent;
            left: 0;
                z-index: 12;
        }

        .banner-progress {
            height: 100%;
            background: #FFFFFF;
            width: 0;
            transition: width 4s linear;
        }
        .banner-thumb-text{
          width: 50%;
          right: 0;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          font-weight: 300;
          letter-spacing: 0.02em;
        }

.banner-accordion {
    z-index: 13;
    width: 520px;
    height: auto;
}

.banner-item {
  background: rgb(0 0 0 / 60%);
            backdrop-filter: blur(10px);
            color: white;
            padding: 0 25px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-bottom: 5px;
            gap: 10px;
}

.banner-header {
    cursor: pointer;
    font-size: 1.8em;
    font-weight: 350;
    padding-top: 20px;
    padding-bottom: 12px;
}

.banner-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.5s ease;
  position: relative;
  padding: 0;
      margin-bottom: 0;
}


.banner-item.active .banner-body {
  max-height: 500px; /* enough for content */
  padding: 0;
      margin-bottom: 22px;
}

.banner-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 0;
  background: #f15a29;
  transition: none;
}




/* Desktop hover */
@media (min-width: 992px) {
  .navbar-mega:hover .navbar-mega-menu {
    display: block;
  }
  .navbar-mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1rem 3rem rgba(var(--bs-body-color-rgb), .175);
  }
}

/* Mobile click (Bootstrap handles show/hide) */
@media (max-width: 991.98px) {
  .navbar-mega-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    display: none;
  }
  .navbar-mega-menu.show {
    display: block;
  }
  .nav-link{
    color: #000;
  }
}



@media (max-width: 991px) {
  .mobile-menu{
    position: absolute;
        width: 90%;
        top: 50px;
        box-shadow: 0 1rem 3rem rgba(var(--bs-body-color-rgb), .175) !important;
        border-radius: 10px;
        background-color: #fff;
        max-height: calc(100vh - 90px);
        overflow: auto;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
  }
  .mobile-menu >ul{
    background-color: transparent;
  }
  .industries-megamenu-left > h5,
  .industries-megamenu-first-section,
  .megamenu-industries-right,
  .custom-solution-left > h5{
    display: none;
  }
  .navbar-mega-menu,
  .navbar-mega-menu-body{
    box-shadow: none;
  }
  .custom-solution-left, .industries-megamenu-left{
    padding-top: 0;
    padding-left: 15px;
    padding-bottom: 0;
  }
  .nav-link {
      font-size: 1.2em;
      padding-top: 4px;
    }
    .navbar-toggler{
              border: none;
        color: #fff;
        font-size: 1.6em;
        padding-top: 0;
        padding-bottom: 0
    }
    .nav-link:focus, .nav-link:hover {
    color: rgba(252, 95, 43, 1);
    outline: none;
}
.nav-link:focus-visible{
  outline: none;
}
.mega-menu-right-solutions{
  border-radius: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
}

@media (max-width: 767px) {
  .navbar-mega-menu .card-img-top{
    height: 100px;
    object-fit: cover;
  }
  .industry-menu-links{
        margin-bottom: 25px;
  }
}


        
        
        /* Responsive adjustments */
        @media (max-width: 992px) {
            .navbar-nav {
                background: rgba(255, 255, 255, 0.95);
                padding: 1rem;
                border-radius: 10px;
            }
            
            .slide-content {
                padding: 1.5rem;
                margin: 0 1rem;
            }
            
            .headline-line {
                font-size: 2.2rem;
            }
        }
        
        @media (max-width: 768px) {
            .next-slide-thumbnail {
                width: 120px;
                height: 80px;
                bottom: 20px;
                right: 20px;
            }
            
            .slider-nav {
                bottom: 20px;
                left: 20px;
            }
            
            .navbar-brand {
                font-size: 1.5rem;
            }
            
            .headline-line {
                font-size: 1.8rem;
            }
            
            .section-two {
                padding: 60px 0;
            }
        }


            @media (max-width: 600px) {
              .banner-content {
    left: 20px;
    width: calc(100% - 40px);
              }
              .section-large-text {
    line-height: 1.2em;
}
            }



















        

/* GenAI Section Styles */
.genai-section {
    position: relative;
    height: 700px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: white;
}

.genai-section .video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.genai-section .background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.genai-section .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.genai-section .genai-content {
    position: relative;
    z-index: 3;
    max-width: 644px;
    padding: 20px 40px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.genai-section .genai-title {
    font-size: 2.8125rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
    line-height: 1.2;
     color: #fff;
}

.genai-description {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 40px;
    letter-spacing: 0.04em;
    color: rgba(221, 221, 221, 1);
}

.genai-benefits {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.genai-section .divider {
    height: 2px;
    width: 60px;
    background: white;
    margin: 2rem 0;
}

.learn-more-btn {
    display: flex;
    color: white;
    text-decoration: none;
    gap: 10px;
    align-items: center;
    font-size: 0.867em;
}
.learn-more-btn .learn-more-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 98, 33, 1);
    border-radius: 50%;
}

.learn-more-btn:hover {
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .genai-title {
        font-size: 2.2rem;
    }
    
    .genai-content {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .genai-section {
        min-height: 600px;
    }
    
    .genai-title {
        font-size: 1.8rem;
    }
    
    .genai-description {
        font-size: 1.1rem;
    }
    
    .genai-content {
        padding: 20px;
        margin: 0 15px;
    }
}

@media (max-width: 600px) {
  .genai-section {
        min-height: auto;
        height: auto;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .genai-section .genai-title
 {
    font-size: 2rem;
}

.guides-section
 {
    padding-top: 40px;
    padding-bottom: 40px;
}
.section-small-text {
    text-align: center;
}
}


























 .section-small-text {
            font-size: 1em;
            margin-bottom: 10px;
            text-transform: uppercase;
            opacity: 0.5;
        }
.section-large-text {
      font-size: 2.867em;
      font-weight: 400;
      line-height: 1.4em;
}
h2.section-large-text span{
    /* font-weight: 300; */
}



















.section-large-text {
  perspective: 400px;
  display: flex;
  flex-direction: column;
}





















.capabilities-section {
            padding: 50px 0;
        }

     

        

        .capabilities-view-more {
            background-color: rgba(255, 98, 33, 1);
            color: white;
        }

        .capabilities-slider-container {
            width: 100%;
            height: 465px;
            position: relative;
            overflow: hidden;
            margin: 20px auto;
            padding-bottom: 90px;
            display: flex;
    justify-content: center;
        }

        .capabilities-slider {
            transition: transform 0.5s ease;
        }

        .capabilities-slide {
            width: 720px;
            height: 100%;
            position: relative;
            flex-shrink: 0;
            border-radius: 10px;
            overflow: hidden;
            margin-right: 10px;
        }

        .capabilities-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .capabilities-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .capabilities-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 20px;
        }

        .capabilities-slide-text {
            color: white;
            font-size: 1.1em;
            position: absolute;
            top: 20px;
            left: 20px;
            text-transform: uppercase;
        }

        .video-play-icon {
            color: white;
            font-size: 0.68rem;
            letter-spacing: 0.05rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 30px;
            backdrop-filter: blur(5px);
            padding: 5px 13px 7px;
            text-transform: uppercase;
            text-decoration: none;
        }

        .capabilities-blur-box {
            position: absolute;
            bottom: 24%;
            right: 20px;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(20px);
            padding: 20px;
            border-radius: 8px;
            color: white;
            max-width: 256px;
            font-size: 0.933em;
            letter-spacing: 0.04em;
            font-weight: 300;
        }

        .capabilities-controls {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
        }

        .capabilities-indicators-box {
            background: rgb(225 225 225 / 50%);
            padding: 14px 17px;
            border-radius: 20px;
            margin: 0 10px;
            display: flex;
            align-items: center;
        }

        .capabilities-dot {
            width: 6px;
            height: 6px;
            background: #a9a9a9;
            border-radius: 50%;
            margin: 0 3px;
            cursor: pointer;
            transition: background 0.3s;
            display: inline-block;
        }

        .capabilities-dot.active {
            background: #000000;
        }

        .capabilities-prev, .capabilities-next {
            background: rgb(225 225 225 / 50%);
            border: none;
            color: #3f3f3f;
            font-size: 0.8em;
            cursor: pointer;
            padding: 0 10px;
            transition: opacity 0.3s;
            border-radius: 50%;
            width: 30px;
            height: 30px;
        }

        .capabilities-prev:disabled, .capabilities-next:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .row.vizru-section-content {
            border-top: 1px solid #d9d6ce;
                padding-top: 4px;
        }
        .vizru-section-content-body-left{
            border-right: 1px solid #d9d6ce;
        }
         .vizru-section-content-body-right{
            justify-content: center;
            display: flex;
        }


        
    @media (min-width: 600px) {
    .vizru-section-content-body-right{
            padding-left: 30px;
        }
        .vizru-section-content-body-left {
    padding-right: 30px;
}
    }
         


        








        .innovation-slider {
            width: 500px;
            height: 350px;
            position: relative;
            overflow: hidden;
            margin: 20px auto;
            display: flex;
        }

        .innovation-slide {
            width: 400px;
            height: 100%;
            position: relative;
            flex-shrink: 0;
        }

        .innovation-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .innovation-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 20px;
            background: rgba(0, 0, 0, 0); /* Overlay darkness */
        }

        .innovation-slide-text {
            color: white;
            font-size: 1.5em;
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 1;
        }

        .innovation-play-icon {
            color: white;
            font-size: 4em;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
            z-index: 1;
        }

        .innovation-blur-box {
          position: absolute;
          bottom: 20px;
          right: 20px;
          left: 20px;
          background: rgba(255, 255, 255, 0.2);
          backdrop-filter: blur(10px);
          padding: 15px;
          border-radius: 8px;
          color: white;
          /* max-width: 300px; */
          z-index: 1;
          width: calc(100% - 40px);
        }































        .vizru-section{
            background-color: rgba(248, 246, 242, 1);
            padding-bottom: 60px;
            padding-top: 60px;
        }

        
.vizru-headline h1 {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
      font-size: 2.667em;
    font-weight: 300;
    color: #000;
}

.vizru-headline h1.show {
  opacity: 1;
  transform: translateY(0);
}

/* Highlight color transition */
.vizru-highlight {
  color: inherit;
  transition: color 0.8s ease;
}
.vizru-highlight.active {
  color: #F15A29;
}


        .vizru-body-text {
            color: var(--vizru-body-color);
            font-weight: 300;
        }

        .vizru-feature-row {
            cursor: pointer;
            transition: background 0.3s;
            border-top: 1px solid rgba(31, 39, 27, 0.2);
            padding-top: 8px;
            padding-bottom: 8px;
            position: relative;
        }

        .vizru-feature-row:hover {
            background-color: #f0f0f0;
        }


        .vizru-features .vizru-icon {
            width: 30px;
            height: 30px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8em;
            flex-shrink: 0 !important;
            border: 1px solid rgba(31, 39, 27, 0.2);
            padding: 2px 5px;
        }
         .vizru-features .vizru-icon img {
          max-width: 100%;
          max-height: 100%;
         }

        .vizru-progress-bar {
            height: 1px;
            background: transparent;
            width: 100%;
            position: absolute;
            top: -1px;
            left: 0;
        }

        .vizru-progress {
            height: 100%;
            background: var(--vizru-highlight-color);
            width: 0;
            transition: width linear;
        }

        .vizru-testimonial-slider {
            background-color: rgba(234, 227, 215, 1);
            border-radius: 8px;
            padding: 20px 30px;
        }
        .vizru-testimonial p{
          font-size: 1.2em;
        }

        .vizru-video-container {
            position: relative;
            height: 100%;
            overflow: hidden;
            border-radius: 5px;
            
        }
        .vizru-section .vizru-video-container {
          /* width: 295px; */
        }
        .vizru-video-wrapper img{
          max-width: 100%;
        }
        .vizru-video-wrapper{
          height: 100%;
        }

        .vizru-video-player {
            width: 100%;
            height: 100%;
            object-fit: cover;  
            object-position: center;
        }

        .vizru-dot {
            width: 10px;
            height: 10px;
            background: transparent;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
            transition: background 0.3s;
            border: 1px solid #ccc;
        }

        .vizru-dot.active {
            background: #ccc;
        }

        .testimonial-logo {
            width: 45px;
            overflow: hidden;
            height: 45px;
            object-fit: contain;
            border-radius: 50%;
            margin-right: 10px;
        }
        .testimonial-logo img{
            max-width: 100%;
        }
        .textimonial-branding{
            font-size: 0.8em;
            margin-top: 20px;
        }













/* impact area */

.impact-wrapper,
.impact-wrapper-mobile {
    padding: 50px 0;
    background-color: rgba(0, 0, 0, 1);
    color: #fff;
}

.impact-list-body
.impact-record {
    cursor: pointer;
    padding: 15px;
    border-top: 1px dotted rgba(248, 248, 243, 0.3);
    color: rgba(248, 248, 243, 0.45);
    display: flex;
    justify-content: space-between;
        font-size: 1.4em;
        font-weight: 300;
}
.impact-arrow{
    opacity: 0;
}
.impact-list-body h2 {
  color: #fff;
}

.impact-record.active,
.impact-record:hover {
    color: white;
}
.impact-record.active .impact-arrow,
.impact-record:hover .impact-arrow{
    opacity: 1;
}
.impact-video-container {
    background-color: #000;
    display: flex; 
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 5px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.impact-video-player {
    width: 357px;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    overflow: hidden;
}

@media (min-width: 600px) {
.impact-list-body {
    padding-right: 60px;
}
}

@media (min-width: 600px) {
.impact-records {
  margin-bottom: 40px;
}
}


/* Dark theme for mobile accordion */
.impact-wrapper-mobile {
  background-color: #0d0d0d;
  color: #f8f9fa;
}
.impact-wrapper-mobile h2 {
    color: #fff;
}
/* Accordion headers */
.impact-wrapper-mobile .accordion-item {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

/* Accordion button (collapsed & expanded) */
.impact-wrapper-mobile .accordion-button {
  background-color: #1a1a1a;
  color: #f8f9fa;
  font-weight: 400;
  box-shadow: none;
  border: none;
  padding: 1rem;
  transition: all 0.3s ease;
}

/* Hover effect */
.impact-wrapper-mobile .accordion-button:hover {
  background-color: #222;
}

/* Expanded (active) button */
.impact-wrapper-mobile .accordion-button:not(.collapsed) {
  background-color: #2b2b2b;
  color: #ff6221; /* Accent color (blue glow) */
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  font-weight: 600;
}

.ratio {
    height: 100%;
}

/* Collapse body */
.impact-wrapper-mobile .accordion-body {
  background-color: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  height: 500px;
}

/* Arrow icon color */
.impact-wrapper-mobile .accordion-button::after {
  filter: invert(1);
  opacity: 0.7;
  transition: transform 0.3s ease;
}

/* When expanded */
.impact-wrapper-mobile .accordion-button:not(.collapsed)::after {
  opacity: 1;
  transform: rotate(90deg);
}

/* Optional: smoother accordion transitions */
.accordion-collapse {
  transition: all 0.3s ease;
}





.innovation-section{
    background-color: rgba(248, 246, 242, 1);
    padding-top: 90px;
    padding-bottom: 60px;
}

.innovation-section .vizru-slider-item{
    width: 330px;
    height: 420px;
}

.innovation-section .vizru-slider-item img{
    max-width: 100%;
}


.innovation-section .innovation-blur-box{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
        bottom: 0;
}




.zeos-engg-section{
    background-color: rgba(248, 246, 242, 1);
    padding-top: 60px;
    padding-bottom: 60px;
}

.zeos-engg-section h2{
  margin-bottom: 65px;
}

.zeos-engg-section .vizru-slider-item{
    width: 330px;
    height: 420px;
}

.zeos-engg-section .vizru-slider-item img{
    max-width: 100%;
}

@media (min-width: 1200px) {
.zeos-engg-section .swiper-wrapper {
    justify-content: center;
}
}



@media (max-width: 600px) {
.zeos-engg-section .vizru-slider-item
 {
    margin-left: auto;
    margin-right: auto;
}

}



























.footer {
  padding-top: 100px;
  padding-bottom: 100px;
}

.footer-logo {
  max-height: 22px;
}

.footer-text {
  color: #fff;
  width: 57%;
}

.footer-link {
  color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
    margin-bottom: 12px;
    display: inline-block;
    font-size: 0.933em;
}

.footer-link:hover {
  color: #fff;
}

.footer-policy-link {
  color: #fff;
  font-size: 0.875rem;
  text-decoration: none;
}

.footer-policy-link:hover {
  color: #fff;
}

.footer-social-link {
  font-size: 1.25rem;
  color: #fff;
  transition: opacity 0.3s;
}

.footer-social-link:hover {
  opacity: 0.7;
}

.footer-disclaimer p {
  margin-bottom: 0.4rem;
}

















.vizru-guide-banner {
  height: 80vh;
  position: relative;
  overflow: hidden;
  padding-top: 80px;
  max-height: 750px;
}
.guide-banner-content{
    margin-top: 48px;
}
.vizru-guide-page .vizru-guide-title,
.vizru-guide-page .section-large-text,
.vizru-guide-page .video-card-text h5,
.vizru-guide-page .guidepage-capabilities-slider .vizru-slider-item h3,
.vizru-guide-page .blog-section h3,
.vizru-guide-page h4.blog-title{
  color: #fff;
}
.vizru-guide-page .blog-item{
  background-color: transparent;
}
.vizru-guide-bg-video,
.vizru-guide-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.vizru-guide-bg-image {
  display: none; /* hidden by default, toggled via JS */
}


.vizru-guide-overlay {
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.vizru-guide-content {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin-top: 50px;
}

.vizru-guide-pill {
  background: rgba(255, 228, 219, 1);
    color: rgba(252, 95, 43, 1);
    font-size: 0.8rem;
    padding: 13px 20px;
    font-weight: 500;
}

.vizru-guide-btn {
  border-radius: 4px;
}

.vizru-guide-thumbs {
    position: absolute;
    z-index: 2;
    gap: 15px;
    bottom: 25px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.vizru-guide-thumb {
  position: relative;
  width: 200px; /* adjust as needed */
  margin: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.vizru-guide-thumb-inner {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  height: 112px;
    overflow: hidden;
}

.vizru-guide-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.vizru-guide-thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0,0,0,0));
  border-radius: 12px;
}

.vizru-guide-thumb p {
  position: absolute;
  bottom: 10px;
  left: 12px;
  margin: 0;
  font-size: 0.9rem;
  color: #fff;
  font-weight: 500;
  z-index: 2;
}

.vizru-guide-thumb.active,
.vizru-guide-thumb:hover {
  transform: scale(1.05);
}

@media (max-width: 600px) {
.vizru-guide-thumbs
 {
    display: none !important;
}

.vizru-guide-content {
    margin-top: 0;
    padding-bottom: 60px;
}
.vizru-guide-banner
 {
    height: auto;
}
}
















.guides-section {
    background-color: #000000;
    padding-top: 100px;
    padding-bottom: 100px;
    color: #fff;
}

.guides-section .swiper-pagination{
  display: none;
}

 .guides-section .swiper {
      width: 100%;
      height: 100%;
    }
    .capabilities-slider .vizru-slider-item{
          width: 720px;
          height: 465px;
    }

 
    .guides-section .swiper-slide {
      text-align: center;
      font-size: 1.2em;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .guides-section .swiper-slide img {
      /* display: block;
      width: 100%;
      height: 100%;
      object-fit: cover; */
    }



    .guides-section .video-card {
  background: #000;
}

.guides-section .video-card-img > img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.video-card-play {
  display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgb(105 105 105 / 40%);
    border-radius: 12px;
    transition: background 0.3s ease;
    backdrop-filter: blur(2px);
    border: 1px solid #fff;
}

.guides-section .video-card-play:hover {
  background: rgba(255, 255, 255, 0.9);
}

.guides-section .video-card-play-icon {
  display: block;
  width: 0;
  height: 0;
  border-left: 14px solid #000;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 3px;
}

.guides-section .video-card-text {
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
  color: #fff;
  width: 100%;
  text-align: left;
}
.guides-section .video-card-text h5{
    font-size: 0.933em;
    font-weight: 400;
    line-height: 1.5em;
}

.video-card-img {
    border-radius: 14px;
    overflow: hidden;
    height: 370px;
}





.capabilities-section.guids-page{
    background-color: #121317;
    color: #fff;
}




.rover-guide-section{
    background-color: #000000;
    padding-top: 100px;
    padding-bottom: 100px;
    color: #fff;
}

.rover-guide-section .vizru-slider-item {
    width: 395px;
    height: 330px;
    display: flex;
    flex-direction: column;
}
.vizru-slider-item p{
      font-size: 1em;
    font-weight: 300;
    margin-bottom: 35px;
}


.rover-guide-slider-holder{
    display: block;
    width: 100%;
    position: relative;
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
}


.rover-guide-section .video-play-icon {
    background: rgb(20 20 20 / 40%);
    border-radius: 12px;
    transition: background 0.3s ease;
    backdrop-filter: blur(2px);
    border: 1px solid #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.rover-guide-section .capabilities-indicators-box {
    background: rgb(151 149 149 / 50%);

}
.rover-guide-section .capabilities-prev, .rover-guide-section .capabilities-next {
    background: rgb(151 149 149 / 50%);
    color: #a1a1a1;
}

@media (max-width: 600px) {
.capabilities-slider .vizru-slider-item
 {
    width: 100%;
}
}














/* blog */

.blog-section{
    background-color: #121317;
    color: #fff;
    padding-top: 100px;
    padding-bottom: 100px;
}
.blog-parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.blog-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
    line-height: 1.5em;
}
.blog-parent .blog-item:first-child .blog-title {
  font-size: 1.4rem;
}

.blog-parent .blog-item:first-child {
    flex-direction: column;
}
.blog-item {
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  
}
.blog-img{
    width: 50%;
    overflow: hidden;
    border-radius: 10px;
    flex: 1;
        max-height: 200px;
}
.blog-parent .blog-item:first-child .blog-img{
    width: 100%;
}


.blog-item img {
      width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; 
}

.blog-content {
  padding: 1rem;
  flex: 1;
}

.blog-meta {
  font-size: 0.85rem;
  color: #aaa;
  margin-bottom: 0.5rem;
}

.blog-title {
  
  margin-bottom: 0.5rem;
}

.blog-parent .blog-item:nth-child(1) {
  grid-row: span 2;   /* first blog spans two rows */
}














   .all-blog-list-section{
    padding-top: 100px;
    padding-bottom: 100px;
   }



.all-blog-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }
    .all-blog-card {
      border-radius: 10px;
      padding: 15px 0;
      transition: transform 0.2s;
    }
    .all-blog-card:hover {
      transform: translateY(-5px);
    }
    .all-blog-card img {
      width: 100%;
      border-radius: 8px;
    }
    .all-blog-card h3 {
      font-size: 1.2em;
      margin: 10px 0 5px;
          font-weight: 400;
    }
    .all-blog-card p {
      font-size: 0.933em;
    }
    .all-blog-date {
      font-size: 0.867em;
      color: rgba(71, 84, 103, 1);
    }
    .all-blog-pagination-wrapper {
      display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(234, 236, 240, 1);
    padding-top: 20px;
    margin-top: 40px;
    }
    .all-blog-pagination {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex: 1;
    }
    .all-blog-pagination button {
      padding: 6px 12px;
      border-radius: 6px;
      cursor: pointer;
    }
    .all-blog-pagination button.active {
        background: rgba(255, 210, 195, 1);
        color: rgba(2, 64, 5, 1);
        border: none;
        padding-left: 15px;
        padding-right: 15px;
    }
    .all-blog-pagination button:hover {
      background: #f1f1f1;
    }
    .pagination-dropdown {
      position: relative;
    }
    .pagination-dropdown-menu {
      display: none;
      position: absolute;
      background: #fff;
      border: 1px solid #ddd;
      top: 100%;
      left: 0;
      z-index: 1000;
    }
    .pagination-dropdown-menu button {
      display: block;
      width: 100%;
      border: none;
      text-align: left;
      background: #fff;
      padding: 6px 12px;
    }
    .pagination-dropdown-menu button:hover {
      background: #f9f9f9;
    }
    .rover-page-blog-section .all-blog-img {
        width: 100%;
        height: 250px;
        overflow: hidden;
        border-radius: 8px;
        object-fit: cover;
        vertical-align: middle;
        margin-bottom: 15px;
    }
    .rover-page-blog-section .all-blog-card img {
        width: 100%;
        border-radius: 8px;
        vertical-align: middle;
        max-height: 100%;
        max-width: 100%;
        object-fit: cover;
    }
button#nextBtn,
button#prevBtn {
    text-decoration: none !important;
    color: rgba(102, 112, 133, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}








/* video popup */

.video-popup {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.video-popup-content {
  background: #000;
  padding: 10px;
  border-radius: 8px;
  max-width: 90%;
  max-height: 80%;
  position: relative;
}

.video-popup-close {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
}

#video-container iframe,
#video-container video {
  width: 80vw;
  height: 45vw;
  max-width: 960px;
  max-height: 540px;
  border: none;
}





/* grid bg animation styling */
.animated-section {
  position: relative;
    min-height: 700px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding-top: 100px;
    padding-bottom: 100px;
}

/* Grid background */
.grid-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px); /* size of box */
  grid-auto-rows: 40px;
  z-index: 1;
}

.grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#f5f5f5 1px, transparent 1px),
    linear-gradient(90deg, #f5f5f5 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Individual box overlays */
.grid-bg div {
  width: 40px;
  height: 40px;
  background: #fff;
  transition: background 0.3s ease;
}

/* Content in the middle */
    .animated-section .content {
      position: relative;
      z-index: 2;
      text-align: center;
    }

    .animated-section .content h2 {
      line-height: 1.5;
      font-size: 2.667em;
    }

    .animated-section .content h2 span {
         font-weight: 300;
    }

    .animated-section .content h2 span.underline-animation {
      display: inline-block;
      border-bottom: 4px solid transparent;
      position: relative;
    }

    /* Pseudo-element for the animated border */
    .animated-section .content h2 span::before {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 4px;
      background-color: #f15a29;
      transition: width 1s ease-out;
    }

    /* Class to trigger the border animation */
    .animated-section .content h2 span.animate::before {
      width: 100%;
    }

.letter {
      display: inline-block;
      min-width: 0.5em;
      text-align: center;
    }



    @media (max-width: 600px) {
      .animated-section {
    min-height: 442px;

}

}



















section.zeos-platform-content-one {
    z-index: 12;
    position: relative;
    background-color: rgba(248, 246, 242, 1);
}

.zeos-platform-banner {
  min-height: 780px;
  position: relative;
  overflow: hidden;
  padding-top: 80px;
}
.zeos-platform-banner .sub-banner-content h1{
      font-size: 3.333em;
    letter-spacing: 0.05em;
}
.zeos-platform-banner .sub-banner-content .vizru-guide-text {
    line-height: 1.3em;
    font-weight: 300;
        margin-top: 15px;
}
.zeos-platform-banner-slider .swiper-slide{
  width: 100%;
}

.zeos-platform-banner .vizru-guide-bg-image {
    display: block;
}

.zeos-platform-content-one .vizru-slider-item {
    width: 100%;
    margin-right: 0;
    height: auto;
}

.zeos-platform-content-one .zeos-platform-banner-slider {
    height: auto;
    margin-top: -200px;
}
.zeos-platform-content-one .zeos-platform-banner-slider .vizru-slider-item > img {
    width: 100%;
}

.zeos-platform-content-one .vizru-slider-itemr {
    background-color: #000;
    padding: 10px;
    border-radius: 10px;
}

.zeos-platform-content-one .zeos-platform-banner-slider {
  margin-top: -200px;
}


@media (max-width: 600px) {
.zeos-platform .sub-banner-content
 {
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}

.zeos-platform-banner
 {
    min-height: 600px;
    padding-top: 50px;
}
}





















/* ZEOS Section */
.zeos-section {
  padding: 60px 0;
  background-color: #faf8f6;
}
.zeos-header {
  margin: 0 auto 100px;
  text-align: center;
}


.zeos-title {
  margin-bottom: 20px;
}

.zeos-subtitle {
  font-size: 1.2em;
    font-weight: 400;
    line-height: 1.6em;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.zeos-section .section-large-text {
    font-size: 3em;
    font-weight: 300;
    letter-spacing: -0.01em;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5em;
    align-items: center;
}
.zeos-content {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.zeos-content .zeos-text{
  margin-right: 70px;
}
.zeos-content .zeos-text h5{
  font-size: 1.4em;
    font-weight: 300;
    line-height: 1.5em;
    margin-bottom: 30px;
}
.zeos-text {
  flex: 1 1 50%;
  font-size: 1.067em;
  color: #333;
  line-height: 1.7;
}

.zeos-text p {
  margin-bottom: 20px;
}

.zeos-btn {
  display: inline-block;
  background-color: #f15a29;
  color: #fff;
  font-size: 0.933em;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.zeos-btn:hover {
  background-color: #d94a1f;
}

.zeos-image-wrapper {
  flex: 1 1 50%;
  position: relative;
}

.zeos-image {
  width: 100%;
  border-radius: 8px;
  display: block;
  position: relative;
  z-index: 1;
}

/* Accent border effect */
.zeos-image-wrapper::after {
  content: "";
  position: absolute;
  top: 20px;
  right: -20px;
  width: 100%;
  height: 100%;
  background-color: #d94a1f;
  border-radius: 8px;
  z-index: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .zeos-content {
    flex-direction: column;
  }

  .zeos-image-wrapper::after {
    top: 15px;
    right: -10px;
  }
}

@media (max-width: 600px) {
  .zeos-header
 {
    margin: 0 auto 50px;
}
.zeos-header {
  text-align: left;
}
}





























/* Section Wrapper */
.zeos-simple-section {
  padding: 60px 0;
  background: #fff;
}

/* Heading */
.zeos-simple-header h2 {
  line-height: 1.3;
  margin-bottom: 40px;
}

.zeos-simple-header h2 span {
  font-weight: 300;
}

/* Common Grid */
.zeos-simple-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Text Cards */
.zeos-card {
  border-radius: 12px;
  overflow: hidden;
  background: #faf8f6;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  height: 250px; /* Fixed height */
  box-sizing: border-box;
}

.zeos-card-title{
  color: var(--vizru-highlight-color);
}

/* Image Cards */
.zeos-card.image-card {
  padding: 0;          /* ✅ remove padding */
  background: none;    /* ✅ no background */
  display: block;      /* ✅ behave like block for image */
}

/* Image Handling */
.zeos-card.image-card img {
  width: 100%;
  height: 250px;       /* ✅ exactly same height as card */
  object-fit: cover;   /* ✅ crop neatly */
  border-radius: 12px;
  display: block;      /* ✅ removes inline gap */
}

/* Responsive */
@media (max-width: 992px) {
  .zeos-simple-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .zeos-simple-grid {
    grid-template-columns: 1fr;
  }
  .zeos-card {
    height: auto;
}
}




























 .vizru-software-section {
  position: relative;
  background-color: rgba(246, 238, 228, 1);
}
.vizru-software-content{
  padding: 100px 0;
  padding-right: 50px;
}

.vizru-software-content h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.vizru-software-content p {
  margin-bottom: 1rem;
  color: #333;
  font-weight: 300;
  font-size: 1em;
}

.btn-orange {
  display: inline-block;
  background: #F15A29;
  color: #fff;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.btn-orange:hover {
  background: #d94a1f;
}


.vizru-software-text h2{
  font-size: 2.667em;
  font-weight: 300;
}

.vizru-software-text h2 strong{
  font-weight: 500;
}




.vizru-software-row {
    margin: 0;
}

/* .vizru-software-content {
    display: flex;
    align-items: center;
    padding: 20px;
    position: relative;
    z-index: 2; 
}

.vizru-software-text {
    max-width: 500px;
}

.vizru-software-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.vizru-software-description {
    font-size: 1.1rem;
    color: #6c757d;
    margin-bottom: 20px;
    line-height: 1.6;
}

.vizru-software-button {
    background-color: #F15A29;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
} */

.vizru-software-button:hover {
    background-color: #d94a1f;
}

.vizru-software-image {
    padding: 20px;
    background-image: url('../img/desktop-with-lap.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 400px; /* Ensure a minimum height */
    position: relative;
}

.vizru-software-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.152); /* Optional overlay for contrast */
    z-index: 1;
}

@media (max-width: 767.98px) {
    .vizru-software-title {
        font-size: 2rem;
    }
    .vizru-software-description {
        font-size: 1rem;
    }
    .vizru-software-image {
        min-height: 300px; /* Adjust height for mobile */
    }
}












.custom-blur-box {
  --blur-bg: rgba(0, 0, 0, 0.7);
  --blur-value: 10px;
  --blur-text-color: #fff;

  background: var(--blur-bg);
  border-radius: 12px;
  backdrop-filter: blur(var(--blur-value));
  -webkit-backdrop-filter: blur(var(--blur-value));
  color: var(--blur-text-color);
}

.software-blur-box{
  width: 200px;
    font-size: 0.8em;
    position: absolute;
    z-index: 12;
    bottom: 25%;
}







/* Section wrapper */
.vz-mask-hero {
  position: relative;
    min-height: 615px;
    display: flex;
    overflow: hidden;
    color: #fff;
    padding-top: 12px;
}

/* Full-width image (unchanging) */
.vz-mask-hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background: url("../img/parallax-bg.webp")
    center/cover no-repeat;
  z-index: 0;
  pointer-events: none;
}

.vz-mask-hero-content{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

/* Mask layer: initially container width, expands to full */
.vz-mask-hero-mask {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 1;
  transition: all 0.9s ease;
  will-change: left, width;
  width: 100%;
  background-color: #eaac8863;
}

/* Foreground content */
.vz-mask-hero-container {
  position: relative;
  z-index: 2;
  padding: 60px 0;
  display: flex;
    align-items: center;
}

.vz-mask-hero-title {
      font-size: 3em;
    margin: 0 0 12px;
    line-height: 1.1;
    color: #fff;
    font-weight: 400;
}

.vz-mask-hero-subtitle {
  font-size: 2.867em;
  margin-bottom: 20px;
}

.vz-mask-hero-cta {
  
  margin-bottom: 20px;
}

.vz-mask-hero-note {
      max-width: 356px;
    padding: 14px;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 300;
}

/* Expanded state */
.vz-mask-hero.vz-active .vz-mask-hero-mask {
  left: 0;
  width: 100vw;
}



@media (max-width: 600px) {
.vz-mask-hero-content
 {
    flex-direction: column-reverse;
    padding-left: 25px;
    padding-right: 25px;
}
.vz-mask-hero-note
 {
    margin-bottom: 30px;
}
}




.sub-banner-content{
  z-index: 2;
}



.sub-gradient-title {
  background: linear-gradient(
    to right,
    rgba(131, 13, 112, 1),
    rgba(255, 228, 156, 1)
  );
  -webkit-background-clip: text;   
  -webkit-text-fill-color: transparent;
  background-clip: text;          
  color: transparent;              
}


.sub-banner-content h1{
  font-size: 3.333em;
}

.vizru-guide-text {
  line-height: 1.8em;
}






















.zeos-platform-banner .vizru-guide-bg-video{
  transform: scaleX(1.1);
}





















/* Section wrapper */
.accelerate-business-section {
  background: rgba(248, 246, 242, 1); 
  padding-top: 100px;
  padding-bottom: 100px;
}

/* Stats number */
.accelerate-business-stat-number {
  color: #b3341b;
  font-size: 2rem;
  font-weight: 700;
}



.accelerate-business-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Play button */
.accelerate-business-play-btn {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.3s;
}

.accelerate-business-play-btn:hover {
  background: rgba(0,0,0,0.8);
}


/* Responsive adjustments */
@media (max-width: 767px) {
  .accelerate-business-section h2, 
  .accelerate-business-section p {
    text-align: center;
  }
}






































.redefining-business-section{
  padding-top: 100px;
  padding-bottom: 100px;
}

.redefining-business-section .all-blog-img{
      background-size: cover;
    height: 135px;
}



















.rover-paralalx{
  height: 600px;
  
  background-size: cover;
  background-position: center center;
  
  display: flex;
    align-items: center;
}

.rover-paralalx h2{
      line-height: 1.56em;
    color: #fff;
    font-weight: 300;
    font-size: 2.2em;
}
























.rover-page-guides-section {
    background-color: rgba(252, 247, 247, 1);
    padding-top: 100px;
    padding-bottom: 100px;
    color: #000;
}

.rover-page-guides-section .video-card-text h5{
    font-size: 0.933em;
    font-weight: 400;
    line-height: 1.5em;
    color: #fff;
}

.rover-page-guides-section .video-card-img > img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.rover-page-guides-section .video-card-img > *{
  z-index: 12;
}

.overlay-shadow{
  background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  height: 50%;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
.rover-page-guides-section .swiper-pagination {
  display: none;
}





.rover-page-slider-section .vizru-slider-item{
    width: 620px;
    height: 531px;
    margin-right: 0;
    border-radius: 0;
        background-repeat: no-repeat;
        background-size: cover;
}


.rover-platform-fullwidth-slider .innovation-blur-box  {
    bottom: 20px;
    left: 0;
    background: rgb(37 17 1 / 56%);
    backdrop-filter: blur(10px);
    border-radius: 0;
    width: 44%;
}

.rover-platform-banner {
  min-height: 780px;
  position: relative;
  overflow: hidden;
  padding-top: 80px;
}
.rover-page-slider-section .swiper.custom-navigation {
    padding-bottom: 0px;
}

.rover-platform-banner .sub-banner-content h1{
      font-size: 3.333em;
    letter-spacing: 0.05em;
}
.rover-platform-banner .sub-banner-content .vizru-guide-text {
    line-height: 1em;
    font-weight: 300;
        margin-top: 15px;
}

.rover-platform-banner .vizru-guide-bg-image {
    display: block;
}

.rover-platform-banner .vizru-guide-bg-video {
    transform: scaleX(1.1);
}
.rover-platform .zeos-platform-content-one .zeos-platform-banner-slider {
    margin-top: -300px;
}

.rover-platform .guide-banner-content {
    margin-top: 85px;
}

.rover-platform .zeos-platform-content-one .vizru-slider-item {
        height: 621px;
}

.rover-platform .zeos-text h5 {
    font-size: 1.4em;
    font-weight: 300;
    line-height: 1.5em;
    margin-bottom: 30px;
}
.rover-platform .accelerate-business-video-wrapper{
  padding-right: 50px;
}
@media (max-width: 600px) {
.rover-platform .zeos-platform-content-one .vizru-slider-item
 {
    height: 220px;
}
.rover-platform .accelerate-business-video-wrapper {
    padding-right: 0;
    margin-bottom: 30px;
}

.rover-platform .guide-banner-content
 {
    margin-top: 0px;
}
.rover-platform-banner {
    min-height: 652px;
    position: relative;
    overflow: hidden;
    padding-top: 60px;
}
.rover-platform .zeos-platform-content-one .zeos-platform-banner-slider
 {
    margin-top: -246px;
}
}









.rover-page-blog-section{
  padding-top: 100px;
  padding-bottom: 100px;
}










.equal-height-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  .rover-ai-section .all-blog-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background: #fff;
    overflow: hidden;
    padding: 1.5rem;
  }

  .rover-ai-section .all-blog-img {
    width: 100%;
    height: 125px;
    background-size: cover;
    background-position: center;
    margin-bottom: 1rem;
  }

  .rover-ai-section .all-blog-card h3 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
  }

  .rover-ai-section .all-blog-card p {
    flex-grow: 1;
  }









  .subpage .equal-height-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  .subpage .all-blog-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background: #fff;
    overflow: hidden;
    padding: 1.5rem;
  }

  .subpage .all-blog-img {
    width: 100%;
    height: 125px;
    background-size: cover;
    background-position: center;
    margin-bottom: 1rem;
  }

  .subpage .all-blog-card h3 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
  }

  .subpage .all-blog-card p {
    flex-grow: 1;
  }

.subpage-list-content li{
  margin-bottom: 10px;
}


























/* Section Wrapper */
.tech-biz-section {
  padding: 60px 0;
  background: #fff;
}

/* Top 4 Cards */
.tech-biz-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}

.tech-biz-card {
  background: rgba(247, 245, 241, 1);
    border-radius: 10px;
    padding: 22px 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tech-biz-card h4 {
  color: rgba(255, 75, 0, 1);
  text-align: left;
  font-size: 1.2em;
}

.tech-biz-card p {
  text-align: left;
}

.tech-biz-card img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Intro */
.tech-biz-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
}

.tech-biz-intro h2 {
  margin-bottom: 15px;
}


/* Split 2 Blocks */
.tech-biz-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  align-items: start;
}

.tech-biz-split-item img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
  object-fit: cover;
}

.tech-biz-split-item h4 {
  color: var(--vizru-highlight-color);
  margin-bottom: 10px;
  font-size: 1.3rem;
  font-weight: 400;
}

.tech-biz-split-item p {
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 992px) {
  .tech-biz-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .tech-biz-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .tech-biz-cards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
.tech-biz-intro {
  text-align: left;
  }
}




















/* Section Wrapper */

.strategy-section {
  padding: 70px 0;
  background: rgba(248, 246, 242, 1);
}

.strategy-section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
}

.strategy-section-header h2 {
  margin-bottom: 15px;
}

.strategy-section-header p {
  font-size: 1rem;
}

/* Rows */
.strategy-section-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: center;
  margin-bottom: 60px;
}

.strategy-section-col img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

/* Content */
.strategy-section-content h3 {
  margin-bottom: 15px;
  font-size: 1.4rem;
  font-weight: 400;
}

.strategy-section-content p {
  color: #333;
  margin-bottom: 15px;
  line-height: 1.6;
}

.strategy-section-content ul {
  margin-bottom: 20px;
  padding-left: 20px;
}

.strategy-section-content ul li {
  margin-bottom: 2px;
}

.strategy-section-bold {
  font-weight: 600;
}

/* Button */
.strategy-section-btn {
  display: inline-block;
  padding: 10px 20px;
  background: #f15a29;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}

.strategy-section-btn:hover {
  background: #d44b25;
}


/* Responsive */
@media (max-width: 992px) {
  .strategy-section-row {
    grid-template-columns: 1fr;
  }
}






























.strategic-platform .zeos-platform-banner {
    min-height: 548px;
    background-size: cover;

}


.strategic-lead-section{
    background-color: #fff;
    padding-top: 70px;
    padding-bottom: 70px;
}

.strategic-lead-section .vizru-slider-item{
    width: 260px;
    height: 370px
}
.strategic-lead-section .vizru-slider-item img{
  max-width: 100%;
}
.strategic-lead-section .capabilities-slider-container{
padding-bottom: 26px;
    height: 390px;
}

.strategic-lead-section .innovation-blur-box{
  width: 100%;
    left: 0;
    bottom: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    height: 78px;
    font-size: 0.867em;
    letter-spacing: 0.1em;
    display: flex;
    align-items: flex-end;
}

.section-main-content{
  width: 730px;
  margin-left: auto;
  margin-right: auto;
}

.strategic-lead-slider .swiper-wrapper{
  justify-content: center;
}

.strategic-lead-slider.swiper.custom-navigation {
    padding-bottom: 20px;
}
.strategic-platform .zeos-platform-banner{
  background-image: url('../img/stratergic-banner.webp');
  background-position: center -224px;
    background-repeat: no-repeat;
}
#video-container{
  min-height: 500px;
  min-width: 500px;
}

/* Hide on desktop, show on mobile */
.impact-wrapper-mobile { display: none; }

@media (max-width: 600px) {
.strategic-platform .zeos-platform-banner
 {
    min-height: 332px;
    background-position: center 0px;
}

.section-main-content {
    width: auto;
}
.strategic-lead-section .vizru-slider-item
 {
    margin-left: auto;
    margin-right: auto;
}
#video-container {
    min-height: auto;
    min-width: auto;
    padding: 5px;
}
.impact-video-player {
    width: 100%;
    height: 577px;
}
}



@media (max-width: 991px) {
  .impact-wrapper { display: none; }
  .impact-wrapper-mobile { display: block; }
}



























/* ========== Sub Page Section ========== */

.zeos-platform-banner.subpage-banner {
    min-height: 278px;
    position: relative;
    overflow: hidden;
    padding-top: 9px;
    display: flex;
    align-items: flex-end;
}
.subpage-banner .vizru-guide-overlay
 {
    background: rgb(0 0 0 / 0%);
    z-index: 1;
}
.subpage-section > .container{
  padding-right: 200px;
    position: relative;
    padding-top: 60px;
}
.sub-breadcrumb{
  text-transform: uppercase;
  font-size: 0.8em;
  text-align: left;
  color: #fff;
  margin-bottom: 20px;
}
.sub-breadcrumb > a{
  color: #fff;
  text-decoration: none;
}
.subpage-section {
  padding: 60px 20px;
    background: #fff;
    text-align: left;
    padding-top: 0;
    position: relative;
    z-index: 12;
}


.sub-banner-text {
    line-height: 1em;
    text-align: left;
}

.subpage-title {
    margin: 30px 0 10px;
        margin-bottom: 35px;
  
}

.subpage-subtitle {
  margin: 30px 0 10px;
  margin-bottom: 20px;
}

.subpage-text {
  font-size: 1rem;
  color: #444;
  margin-bottom: 50px;
  line-height: 1.6;
}

.subpage-media {
  position: relative;
  margin: 30px 0;
  max-width: 900px;
  border-radius: 10px;
  overflow: hidden;
}

.subpage-media-img {
  width: 100%;
  height: auto;
  display: block;
}

.subpage-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.subpage-media:hover .subpage-overlay {
  opacity: 1;
}

.subpage-btn {
  background: #F15A29;
  border: none;
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 1rem;
  cursor: pointer;
}

.subpage-btn:hover {
  background: #d94a1f;
}

.subpage-list {
  margin-top: 20px;
  padding-left: 20px;
}

.subpage-list li {
  margin-bottom: 12px;
  font-size: 1.6em;
  color: #000;
  line-height: 1.5;
  font-weight: 500;
}


.subpage .swiper.custom-navigation {
    padding-bottom: 100px;
}

.media-file {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Responsive */
@media (max-width: 768px) {
  .subpage-title {
    font-size: 1.6rem;
  }

  .subpage-subtitle {
    font-size: 1.3rem;
  }

  .subpage-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}






.swiper-slide{
  width: auto;
}
.vizru-slider-item{
  width: 300px;
  height: 200px;
  position: relative;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 10px;
}

.vizru-slider-item-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vizru-slider-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
}

.vizru-slider-item-text {
    color: white;
    font-size: 1.6em;
    position: absolute;
    top: 20px;
    left: 20px;
    text-transform: uppercase;
}
/* ---------- Swiper centered bottom controls (for .mySwiper) ---------- */
/* Adjust these if you want different sizes/gaps */
.swiper.custom-navigation {
  --sb-size: 30px;    /* button diameter */
  --sb-gap: 15px;     /* gap between buttons */
  --sb-offset: calc((var(--sb-gap) / 2) + (var(--sb-size) / 2));
}

/* Base styles for both arrows */
.swiper.custom-navigation .swiper-button-prev,
.swiper.custom-navigation .swiper-button-next {
  position: absolute !important;
    bottom: 20px !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    width: var(--sb-size);
    height: var(--sb-size);
    border-radius: 50%;
    background: #e6e6e6;
    display: flex
;
    align-items: center;
    justify-content: center;
    color: #333;
    z-index: 20;
    box-shadow: none;
    transition: transform .18s 
ease, background .18s 
ease;
    padding: 0;
    margin: 0 !important;
    overflow: visible;
    border: none;
}

/* Small hover effect */
.swiper.custom-navigation .swiper-button-prev:hover,
.swiper.custom-navigation .swiper-button-next:hover {
  background: #dcdcdc;
  transform: scale(1.04);
}

/* Position them around center using translateX with computed offset */
.swiper.custom-navigation .swiper-button-prev {
  transform: translateX(calc(-50% - var(--sb-offset))) !important;
}

.swiper.custom-navigation .swiper-button-next {
  transform: translateX(calc(-50% + var(--sb-offset))) !important;
}

/* Style the default arrow glyph (Swiper uses ::after by default) */
.swiper.custom-navigation .swiper-button-prev::after,
.swiper.custom-navigation .swiper-button-next::after {
  font-size: 14px;   /* make the glyph smaller */
  color: #333;
  width: 1em;
  height: 1em;
  line-height: 1;
}

/* RTL handling: swap directions */
.swiper.custom-navigation.swiper-rtl .swiper-button-prev {
  transform: translateX(calc(-50% + var(--sb-offset))) !important;
}
.swiper.custom-navigation.swiper-rtl .swiper-button-next {
  transform: translateX(calc(-50% - var(--sb-offset))) !important;
}

/* Ensure pagination/dots don't overlap — move them a bit up if present */
.swiper.custom-navigation .swiper-pagination {
  bottom: 68px !important; /* push pagination above these buttons (adjust if needed) */
}

/* Optional: make buttons accessible focus-visible */
.swiper.custom-navigation .swiper-button-prev:focus,
.swiper.custom-navigation .swiper-button-next:focus {
  outline: 2px solid rgba(0,0,0,0.12);
  outline-offset: 3px;
}

.swiper.custom-navigation
 {
    padding-bottom: 100px;
}
.swiper-wrapper {
  /* justify-content: center; */
}

/* Responsive: smaller buttons on tiny screens */
@media (max-width: 480px) {
  .swiper.custom-navigation {
    --sb-size: 34px;
    --sb-gap: 18px;
  }
  .swiper.custom-navigation .swiper-pagination { bottom: 60px !important; }
}




.home-capabilities-slider .vizru-slider-item{
  width: 720px;
  height: 420px;
}
















.subpage .container.contentarea{
  text-align: left;
  padding-right: 28em;
}

.subpage-slide-section{
    background-color: #fff;
    padding-top: 70px;
    padding-bottom: 70px;
}

.subpage-slide-section .vizru-slider-item{
    width: 330px;
    height: 420px;
}

.subpage-slide-section .vizru-slider-item img{
    max-width: 100%;
}



.full-width-sec{
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.subpage .full-width-sec .container{
  max-width: 900px;
}



.source-download-icon
 {
    background-color: rgba(252, 95, 43, 1);
    border-radius: 50%;
    width: 85px;
    height: 85px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 39px;
}

.source-download {
    position: absolute;
    right: 0;
    top: -51px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-transform: uppercase;
    font-weight: 500;
    display: none;
}

.source-download {
  cursor: pointer;
}

.source-download-icon i {
  font-size: 1.5rem;
  color: #fff;
}

.source-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: #fff;
  border: 1px solid #F15A29;
  border-radius: 6px;
  overflow: hidden;
  min-width: 220px;
  z-index: 1000;
}

.source-dropdown a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  text-decoration: none;
  color: #000;
  border-bottom: 1px solid #F15A29;
  font-size: 0.95rem;
}

.source-dropdown a:last-child {
  border-bottom: none;
}

.source-dropdown a:hover {
  background: #f7f7f7;
}


@media (max-width: 991px) {
.subpage .container.contentarea {
    padding-right: 0;
}
}
















.animate-text span {
  display: inline-block;
  opacity: 0;
}

.animate-text.animate span {
  transform: scale(0.8);
  animation: scaleIn 0.5s forwards;
  animation-delay: calc(var(--i) * 0.07s);
}

@keyframes scaleIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}



.has_text_move_anim > span {
  display: block;
  text-align: start;
  position: relative;
  transform-origin: 50% 0%;
  transition:
    transform 0.6s cubic-bezier(0.5, 0, 0.5, 1),
    opacity 0.6s cubic-bezier(0.5, 0, 0.5, 1);
  transform: translate3d(0px, 30px, 0px) rotateX(-20deg) perspective(2000px);
  opacity: 0;
}
.has_text_move_anim.visible > span {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.has_text_move_anim > span:nth-child(2) {
  transition-delay: 0.1s;
}
.has_text_move_anim > span:nth-child(3) {
  transition-delay: 0.2s;
}
































.text-color-loader-anim {
  position: relative;
  display: inline-block;
  color: inherit; /* keep original text color by default */
  overflow: hidden;
}

.text-color-loader-anim::after {
  content: attr(data-text); /* overlay same text */
  position: absolute;
  top: 0;
  left: 0;
  width: 0%; /* start hidden */
  height: 100%;
  color: var(--anim-color, #f15a29);
  white-space: nowrap;
  overflow: hidden;
  transition: width var(--anim-duration, 3s) linear;
}

.text-color-loader-anim.animate::after {
  width: 100%; /* wipe across */
}




















#scramble-text {
  white-space: pre-line; /* preserves line breaks */
}



section{
  position: relative;
}
.need-content{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #ffffff3a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: red;
  font-size: 3em;
  z-index: 125;
}




















.viz-bot h3.font-semibold.text-sm{
  font-size: 1.2em;
    color: #fff;
    margin-bottom: 5px;
}



.viz-bot .from-purple-600 {
    --tw-gradient-from: #fb9d3d;
    --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #eb252e;
}



























.modal-backdrop {
    --bs-backdrop-bg: #959595;
}


#signinpop .modal-dialog,
#app-install .modal-dialog {
  max-width: 980px;
  top: 50%;
  transform: translateY(-50%);
}
#signinpop .modal-content,
#app-install .modal-content {
  border-radius: 10px;
  height: 100%;
  background-color: #000;
}
.popup-modal-wrap{
  display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}
.popup-modal-content{
  flex:1;
  padding-right: 100px;
    padding-left: 64px;
}
.login-modal-graphic{
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.login-modal-graphic .bg{
  display: inline-block;
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.login-modal-graphic .bg img,
.login-modal-graphic .graphic img{
  max-width: 100%;
  max-height: 100%;
}
.login-modal-graphic .graphic{
  display: inline-block;
    position: relative;
    z-index: 5;
    text-align: center;
    height: 550px;
    border-radius: 10px;
    overflow: hidden;
}

.login-title{
  font-size: 27px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 40px;
  display: inline-block;
}
.login-action{
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.login-action > span:first-child{
display: flex;
    align-items: center;
}
a.signup-text{
  color: #ffffff;
  transition: all ease-in-out 0.03s;
  font-size: 14px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
a.signup-text i{
  
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  margin-top: 4px;
}
a.signup-text:hover i {
  margin-left: 5px;
}
a.signup-text > i:before{
  font-size: 13px;
}
a.signup-text:hover{
  color: #fff;
}
.popup-modal-wrap .input-group-text {
  font-weight: 300;
  color: #d2d2d2;
}
#signinpop .modal-content .btn-close,
#app-install .modal-content .btn-close{
  position: absolute;
    right: -9px;
    top: -8px;
    z-index: 12;
    background-color: #eee;
    opacity: 1;
}
.modal-backdrop.show {
  opacity: .8;
}

.sign-up-input-holder{
  position: relative;
  margin-bottom: 40px;
}

.input-group>.form-control, .input-group>.form-floating, .input-group>.form-select {
    background-color: #3c364c;
    border-color: #baade1;
    color: #fff;
    height: 48px;
}

.form-control::placeholder {
    color: #fff;
    font-weight: 300;
}

span#basic-addon2 {
    position: absolute;
    right: 9px;
    bottom: 7px;
    background-color: #1B1B1B;
    padding: 5px 10px;
    color: #fff;
    border-radius: 6px;
    z-index: 3;
}


.gradient-input-wrap {
            position: relative;
            width: 100%;
        }

        .gradient-input-wrap input {
            width: 100%;
            padding: 12px;
            background-color: transparent;
            height: 48px;
            padding-right: 112px;
            border: none;
            border-radius: 8px;
            color: #ffffff;
            font-size: 16px;
            outline: none;
            transition: all 0.3s ease;
            z-index: 2;
            position: relative;
            border: 1px solid #fff;
        }

        .gradient-input-wrap input:focus,
        .gradient-input-wrap input:active {
          background-color: #000;
          border-color: transparent;
          color: #fff;
        }

        .gradient-input-wrap input::placeholder {
            color: #888;
        }

        /* Gradient border animation */
        .gradient-input-wrap::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #ff00cc, #3333ff, #00ffcc, #ff00cc);
            background-size: 400%;
            border-radius: 12px;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 1;
            animation: gradient 8s linear infinite;
        }

        .gradient-input-wrap input:focus + .gradient-input-wrap::before,
        .gradient-input-wrap:focus-within::before {
            opacity: 1;
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 400% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }


.helper-text{
  color: #fff;
  opacity: 0.5;
  font-size: 12px;
      display: inline-block;
    margin-top: 10px;
}
.popup-label{
color: #fff;
    margin-bottom: 10px;
    display: block;

}