:root {
            --bg-orange: #fff4ec;
            --bg-blue: #eef2ff;
            --bg-purple: #f5f3ff;
            --bg-green: #f0fdf4;
            --bg-pink: #fdf2f8;
            --bg-teal: #f0fdfa;   
            --c-orange: #f97316;
            --c-blue: #3b82f6;
            --c-purple: #8b5cf6;
            --c-green: #22c55e;
            --c-pink: #ec4899;
            --c-teal: #14b8a6;
            --c-navy: #1e3a8a;
            --text-main: #334155;
            --text-light: #64748b;
        }

body {
  background-color: #f4f4f4;
  font-family: Inter, sans-serif;
}

.hero-wrapper {
  padding-top: 5rem;
}

.brand-italic {
  font-family: Montserrat, sans-serif;
  color: #EF0707
}

.tracking-tight {
  line-height: 1.05;
}

.fs-7 {
  font-size: 0.85rem;
}

.fs-8 {
  font-size: 0.75rem;
}

.z-index-10 {
  z-index: 10;
}

.avatar-img {
  width: 44px;
  height: 44px;
}

.book-call-badge {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.book-call-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem #00000014 !important;
}

.abstract-shape {
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  z-index: 1;
  pointer-events: none;
  background-image: url('/assets/aic-hero.png');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  filter: url('#liquid-filter');
  animation: liquid 3s ease-in-out infinite;
  transform-origin: center;
}

@keyframes liquid {
  0%,
  100% {
    transform: scale(1) translate(0, 0) rotate(0deg);
  }

  33% {
    transform: scale(1.00) translate(-2px, 2px) rotate(0deg);
  }

  66% {
    transform: scale(1.00) translate(2px, -2px) rotate(0deg);
  }

}

.navbar {
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
  z-index: 1040;
  background-color: transparent;
}

.navbar.scrolled {
  background-color: #f4f4f4bf !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px #0000000d;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.marquee-container {
  width: 50%;
  white-space: nowrap;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.marquee-track {
  display: inline-flex;
  gap: 0.5rem;
  padding-left: 0.5rem;
  animation: scroll-left 25s linear infinite;
}

.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}

.badge-hover {
  transition: background-color 0.2s ease, color 0.2s ease;
}

.badge-hover:hover {
  background-color: #212529 !important;
  color: #fff !important;
}

.marquee-logo {
  width: 20px;
  height: 20px;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.fullscreen-menu {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f4f4f4fa;
  backdrop-filter: blur(8px);
  z-index: 1050;
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);

}

.fullscreen-menu.open {
  transform: translateY(0);
}

.menu-link {
  transition: color 0.2s, transform 0.2s;
  font-size: 40px;
}

.menu-link:hover {
  color: #EF0707 !important;
  transform: scale(1.05);
}

.typing-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.ic-touch {
  color: #EF0707;
}

.trusted-section {
  background-color: #f4f4f4;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

.trusted-text {
  font-size: 0.9rem;
  color: #888;
  max-width: 150px;
}

.sponsor-marquee-container {
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.sponsor-track {
  display: inline-flex;
  white-space: nowrap;
  animation: sponsor-scroll 20s linear infinite;
  width: max-content;
}

.sponsor-track:hover {
  animation-play-state: paused;
}

.sponsor-logo {
  height: 35px;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: opacity 0.3s ease;
}

.sponsor-logo:hover {
  opacity: 1;
}

@keyframes sponsor-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.product-card {
  position: sticky;
  top: 150px;
  height: 550px;
  background-color: #313131;
  border-radius: 1.5rem;
  overflow: hidden;
  color: #fff;
  border: 10px solid #e0e0e0;
  box-shadow: 0 10px 30px #0000001a;
}

.product-card:last-child {
  margin-bottom: 4rem;
}

.product-card .row {
  height: 100%;
}

.product-info-side {
  background-color: #1a1a1a;
  padding: 3rem;
  flex-direction: column;
}

.custom-switch .form-check-input {
  width: 2.8rem;
  height: 1.5rem;
  background-color: #333;
  border-color: #444;
  cursor: pointer;
}

.custom-switch .form-check-input:checked {
  background-color: #fff;
  border-color: #fff;
}

.feature-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 2rem;
}

.feature-list li {
  margin-bottom: 0.75rem;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: #ccc;
}

.vertical-scroll-container {
  border-radius: 1rem;
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.vertical-scroll-track {
  top: 0;
  left: 0;
  right: 0;
  height: max-content;
  flex-direction: column;
  gap: 0.5rem;
  animation: scroll-up 25s linear infinite;
  animation-duration: 28s;
}

.vertical-scroll-container:hover .vertical-scroll-track {
  animation-play-state: paused;
}

.vertical-scroll-track img {
  width: 100%;
  border-radius: 0.75rem;
  object-fit: cover;
  background-color: #111;
}

@keyframes scroll-up {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

@media (width < 991px) {
  .abstract-shape {
    width: 100%;
    background-size: cover;
    background-position: center;
  }

  .tracking-tight {
    color: white !important
  }

  .mobile-text {
    color: white !important;
  }

  .marquee-container {
    width: 100%;
  }

  .action-wrapper {
    gap: 0.5rem !important;
    overflow-x: auto;
    padding-bottom: 5px;
  }

  .action-wrapper .btn {
    font-size: 0.85rem !important;
    padding: 0.5rem 1rem !important;
  }

  .avatar-img {
    width: 36px;
    height: 36px;
  }

  .trusted-section .container {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  .trusted-text {
    max-width: 100%;
  }

  .product-card {
    position: relative;
    top: 0;
    height: auto;
    margin-bottom: 3rem;
    box-shadow: 0 15px 35px #0003;
  }

  .product-card:last-child {
    margin-bottom: 3rem;
  }

  .product-info-side {
    padding: 2rem;
    height: auto;
  }

  .vertical-scroll-container {
    min-height: 350px;
  }

  .carousel-progress-container {
  padding: 12px !important;
}

.progress-bar-wrapper {
  width: 25px !important;
  height: 5px !important;
  background-color: #cacaca;
  border-radius: 20px !important;
  cursor: pointer;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background-color: #EF0707;
  transition: none;
}

.progress-bar-wrapper.active .progress-fill {
  width: 100%;
  transition: width 5000 linear;
}

.custom-btn{
  padding: 15px !important;
  font-size: 10px !important;
}
}

.text-inter {
  font-family: Inter, sans-serif;
}

.serif-text {
  font-family: Montserrat, sans-serif;
}

.text-brand-red {
  color: #EF0707 !important;
}

.main-footer {
  background-color: #3232320f;
  color: #EF0707;
}

.footer-logo {
  font-size: clamp(4rem, 15vw, 15rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  margin-left: -10px;
}

.footer-link {
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

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

.social-icons a {
  color: #EF0707;
  font-size: 1.5rem;
  transition: transform 0.2s ease, opacity 0.2s ease;
  display: inline-block;
}

.social-icons a:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}

.scroll-timeline {
  top: 0;
  bottom: 0;
  left: 4%;
  width: 2px;
  background-color: #ef070726;
  z-index: 0;
}

.scroll-timeline-fill {
  top: 0;
  left: 0;
  height: 0%;
  background-color: #EF0707;
}

.scroll-timeline-flag {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 14px;
  height: 14px;
  background-color: #f4f4f4;
  border: 3px solid #EF0707;
  border-radius: 50%;
  box-shadow: 0 0 15px #ef0707cc;
  animation: pulse-flag 2s infinite ease-in-out;
}

@keyframes pulse-flag {
  0% {
    box-shadow: 0 0 0 0 #ef070766;
  }

  70% {
    box-shadow: 0 0 0 10px #ef070700;
  }

  100% {
    box-shadow: 0 0 0 0 #ef070700;
  }
}

@media (width < 991px) {
  .scroll-timeline {
    left: 15px;
  }
}

.close-btn {
  width: 45px;
  height: 45px;
  font-size: 1.2rem;
}

.ai-campus-logo {
  height: 45px;
}

.title-style {
  font-family: Montserrat, sans-serif;
  max-width: 900px;
}

.first-card {
  z-index: 1;
}

.second-card {
  z-index: 2;
}

.third-card {
  z-index: 3;
}

.fourth-card {
  z-index: 4;
}

.fifth-card {
  z-index: 5;
}

.sixth-card {
  z-index: 6;
}

.seventh-card {
  z-index: 7;
}

.divider {
  border-bottom: 1px solid #e8e8e8 !important;
}

.submenu {
  display: none;
  transition: opacity 0.3s ease-in-out;
}

.hover-dropdown:hover .submenu {
  display: block;
  opacity: 1;
}

.menu-toggle::after {
  content: '\25BC';
  font-size: 0.4em;
  vertical-align: middle;
  margin-left: 12px;
  transition: transform 0.3s ease;
  display: inline-block;
}

.hover-dropdown:hover .menu-toggle::after {
  transform: rotate(-180deg);
}

.menu-scroll-container {
  max-height: 90vh;
  overflow-y: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.menu-scroll-container::-webkit-scrollbar {
  display: none;
}

.sub-link {
  transition: all 0.2s ease-in-out;
}

.sub-link:hover {
  color: #dc3545 !important;
  font-weight: bold !important;
}

.nav-link-2 {
  transition: all 0.2s ease-in-out;
}

.nav-link-2:hover {
  font-weight: 700 !important;
  color: #EF0707 !important;
}

.fullscreen-footer {
  z-index: 2;
}

.mobile-text-second {
  color: black !important;
}

.workflow-accordion .accordion-button {
  font-size: 1.35rem;
  color: #1d1d1f;
  padding-left: 0;
  padding-right: 0;
  background-color: transparent !important;
  box-shadow: none !important;
}

.workflow-accordion .accordion-button:not(.collapsed) {
  color: #1d1d1f;
}

.workflow-accordion .accordion-body {
  padding-left: 0;
  padding-right: 0;
  color: #515154;
  font-size: 0.95rem;
}

.mockup-iphone {
  width: 140px;
  height: 280px;
  object-fit: cover;
  z-index: 2;
  margin-left: 45%;
  border: 5px solid black;
}

.mockup-ipad {
  width: 500px;
  height: 320px;
  object-fit: cover;
  right: 100px !important;
  left: 70%;
  border: 5px solid black;
}

.proba-btn {
  padding-left: 70%;
  position: relative;
  z-index: 3;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
  grid-column: span 7;
}

.min-h-120 {
  min-height: 120px;
}

.tracking-tight {
  letter-spacing: -0.04em;
}

.gallery-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.gallery-track:active {
  cursor: grabbing;
}

.gallery-track::-webkit-scrollbar {
  display: none;
}

.gallery-img {
  width: 280px;
  height: 420px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 20px !important;
  border: 5px solid #ddd;
}

.fade-left {
  background: linear-gradient(to right, #fff 0%, #fff0 100%);
  pointer-events: none;
  width: 15%;
  z-index: 2;
}

.fade-right {
  background: linear-gradient(to left, #fff 0%, #fff0 100%);
  pointer-events: none;
  width: 15%;
  z-index: 2;
}

.about-hero {
  border-radius: 30px;
  border: 8px solid #e6e6e6;
  margin: 10px !important;
  height: 500px;
  background: linear-gradient(#00000027, #0f0f0ff2), url('https://empirewebvideos.s3.us-east-1.amazonaws.com/websites/AIC/archive/aicampus_image.webp') center/cover no-repeat;
}

@media (width <=767.98px) {
  .proba-btn {
    right: 40% !important;
    font-weight: 1px !important;
  }

  .mobile-btn {
    font-size: 18px !important;
    width: 150px !important;
  }

  .menu-link {
    font-size: 25px !important;
  }

  .mockup-ipad {
    margin-top: 20px;
    left: 50% !important;
    width: 400px;
    height: 280px;
  }

  .mockup-iphone {
    margin-top: 40px;
    left: -40% !important;
  }

  .main-title {
    font-size: 27px !important;
    width: 200px !important;
  }

  .text-description {
    font-size: 12px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero-content-box{
    border-radius: 20px !important;
  }

  .nav-arrow{
    width: 40px !important;
    height: 40px !important;
  }

  .static-hero-box, .static-hero-box-gov, .static-hero-box-ent, .static-hero-box-partners{
    border-radius: 15px !important;
    margin: 0 !important;
    height: 85vh !important;
  }

  .static-hero-wrapper{
    padding: 2% !important;
    margin-top: 5% !important;
  }

  .btn-danger{
    font-size: 12px !important;
  }

  label{
    font-size: 13px !important;
  }

  .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-column: span 7;
}

.calendar-grid span{
  font-size: 10px !important;
}

.min-h-120{
  min-height: 50px !important;
}
}

@media (width >=768px) and (width <=991.98px) {
  .main-title {
    font-size: 27px !important;
    width: 500px !important;
  }

  .text-description {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .mobile-btn {
    font-size: 18px !important;
    width: 150px !important;
  }

  .mockup-ipad {
    margin-top: 20px;
    left: 30% !important;
    width: 400px;
    height: 280px;
  }

  .mockup-iphone {
    margin-top: 40px;
    left: -40% !important;
  }

  .proba-btn {
    right: 40% !important;
    font-weight: 1px !important;
  }

  .mobile-btn {
    font-size: 18px !important;
    width: 250px !important;
  }

  .scroll-timeline {
    display: none !important;
  }

}

@media (width >=768px) and (width <=1199.98px) and (orientation: landscape) {
  .text-description {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .mobile-btn {
    font-size: 18px !important;
    width: 250px !important;
  }

  .proba-btn {
    right: 20% !important;
    font-weight: 1px !important;
  }

  .scroll-timeline {
    display: none !important;
  }
}

.journey-card {
  background: #fff6;
  backdrop-filter: blur(12px);
  border: 1px solid #0000000d !important;
  box-shadow: 0 10px 30px #0000000a;
  min-height: 350px;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  perspective: 1000px;
}

.journey-card:hover {
  transform: translateY(-8px);
  background: #fffc;
  box-shadow: 0 20px 40px #af00001a;
}

.card-icon {
  width: 85px;
  height: 85px;
  background: #ffffff1a;
  color: #000;
  margin-bottom: 25px;
  box-shadow: 0 4px 10px #0000001a;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.card-icon-img {
    width: 42px;  
    height: 42px;
}

.journey-card:hover .card-icon {
  background: #ff00000d;
  color: #af0000 !important;
  transform: scale(1.1) rotateY(360deg);
  box-shadow: 0 10px 20px #af000033;
}

.card-title {
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #000;
}

.card-text {
  color: #444 !important;
  line-height: 1.6;
}

.media-image {
  height: 250px;
}

.contact-card {
  background: #fff9;
  backdrop-filter: blur(15px);
  border: 7px solid #eee;
  box-shadow: 0 15px 35px #0000000d;
}

.glass-input {
  background: #ffffff80 !important;
  border: 1px solid #0000001a !important;
  border-radius: 15px !important;
  transition: all 0.3s ease;
}

.glass-input:focus {
  background: #fff !important;
  border-color: #af0000 !important;
  box-shadow: 0 0 15px #af00001a !important;
}

.contact-btn {
  background: #000;
  border: none;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  perspective: 1000px;
}

.contact-btn:hover {
  background: #af0000;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px #af000033;
}

.contact-btn:hover .btn-icon {
  display: inline-block;
  animation: coin-spin 0.6s ease;
}

@keyframes coin-spin {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

.form-floating>label {
  color: #6c757d;
}

.info-icon {
  width: 40px;
  height: 40px;
}

.glass-input {
  height: 150px;
}

.active-nav {
  color: red !important;
}

.video-border {
  border: 8px solid #ddd;
}

.calendar-wrapper {
  border: 8px solid #ddd !important;
}

.message-input {
  height: 150px !important;
}

.text-danger {
  color: #EF0707 !important;
}

.problem-section {
  background-color: white;
}

.problem-circle {
  width: 50px;
  height: 50px;
}

.problem-img {
  border: 5px solid #f0f0f0 !important;
}

.box-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-top: 5px solid #dc3545;
}

.box-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px #0000001a !important;
}

.arrow-divider {
  font-size: 2rem;
  align-self: center;
}

@media (width < 991px) {
  .arrow-divider {
    transform: rotate(90deg);
    margin: 1rem 0;
  }
}

.carousel-height {
  height: 80vh;
}

.text-width {
  width: 450px;
}

.hero-content-box {
  border-radius: 40px;
  min-height: 80vh;
  background-color: #fff;
  box-shadow: 0 10px 40px #0000000d;
}

.carousel-item {
  min-height: 80vh;
}

.carousel-img {
  object-fit: cover;
  filter: grayscale(100%);
}

.hero-overlay {
  background-color: #000000a6;
}

.main-title {
  font-size: 55px;
  width: 900px;
}

.text-description {
  color: white;
  font-size: 15px;
  max-width: 900px;
  margin: 1.5rem auto;
  line-height: 1.7;
}

.custom-btn {
  border: 2px solid #fff !important;
  color: white;
  background-color: transparent;
  font-size: 0.8rem;
  letter-spacing: 2px;
  transition: all 0.3s ease;
}

.custom-btn:hover {
  background-color: #f00;
  color: #fff;
  border-color: #f00;
}

.nav-arrow {
  width: 60px;
  height: 60px;
  background-color: #fff;
  color: #000;
  border: 2px solid #fff;
  transition: all 0.2s ease;
  cursor: pointer;
  z-index: 10;
}

.nav-arrow:hover {
  background-color: #f00;
  color: #fff;
  border-color: #f00;
  transform: scale(1.1);
}

.left-arrow {
  top: 45%;
  left: -25px;
}

.right-arrow {
  top: 45%;
  right: -25px;
}

.bottom-arrow {
  bottom: -25px;
  left: 48%;
}

.carousel-progress-container {
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  gap: 12px;
  z-index: 20;
  background: #f0f0f0;
  padding: 15px 30px;
  border-radius: 50px;
}

.progress-bar-wrapper {
  width: 25px;
  height: 5px;
  background-color: #cacaca;
  border-radius: 10px;
  cursor: pointer;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background-color: #EF0707;
  transition: none;
}

.progress-bar-wrapper.active .progress-fill {
  width: 100%;
  transition: width 5000 linear;
}

.progress-bar-wrapper.finished .progress-fill {
  width: 100%;
}

.product-page{
  margin-top: 100px;
}

/* New landing Tlotlis */

.nav-link-custom {
      color: #333;
      font-size: 14px;
      transition: color 0.3s ease;
  }

  .nav-link-custom:hover {
      color: #fe0707;
  }

  .btn-danger{
      background-color: #fe0707;
  }
  
  .static-hero-wrapper {
      padding-bottom: 2rem; 
  }

  .static-hero-box {
      min-height: 560px;
      border-radius: 40px;
      background: linear-gradient(to bottom, #000000de, #000c), url('/assets/m&e.jpg') center/cover no-repeat; 
  }

  .hero-decorator-pill {
      bottom: -18px; 
      left: 50%;
      transform: translateX(-50%);
      background: #f8f9fa !important;
      padding: 15px;
      border-radius: 50px;
      z-index: 10;
  }

  .decorator-dash {
      width: 250px;
      height: 4px;
      background-color: #f8f9fa !important;
      display: inline-block;
  }
  
  .decorator-dash.active {
      background-color: #f8f9fa;
  }

  .style-pill{
      background-color: #f8f9fa !important;
  }

  .nav-dropdown-wrapper {
      padding-bottom: 20px;
      margin-bottom: -20px;
  }

  
  .nav-full-bg {
      inset: 0;
      width: 100vw;
      height: 0;
      background-color: #f8f9fa;
      z-index: -1;
      transition: height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      border-bottom: 1px solid transparent;
      pointer-events: none;
  }

  .nav-dropdown-wrapper:hover .nav-full-bg {
      height: 180px; 
      border-bottom: 1px solid #00000014;
      box-shadow: 0 10px 20px #00000008;
  }

  .dropdown-stack {
      top: 100%;
      left: 0;
      flex-direction: column;
      gap: 14px;
      padding-top: 10px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-5px);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      min-width: 150px;
  }

  .nav-dropdown-wrapper:hover .dropdown-stack {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }

  .dropdown-stack a {
      color: #333;
      font-size: 14px;
      font-weight: 500;
      transition: color 0.2s ease;
  }

  .dropdown-stack a:hover {
      color: #fe0707;
  }

  .dropdown-icon{
    font-size: 0.7em; 
    margin-top: 2px;
  }

/* New Landing Gov - Austin */
    .static-hero-box-gov {
            min-height: 560px;
            border-radius: 40px;
            background: linear-gradient(to bottom, #000000de, #000c), url('/assets/union.png') center/cover no-repeat; 
        }

   .custom-card {
            border-radius: 20px; 
            box-shadow: 0 4px 15px #0000000d; 
            transition: transform 0.3s ease, box-shadow 0.3s ease;
         }

        .custom-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px #0000001a;
        }

        .top-bar {
            height: 30px;
        }

        .icon-pair-img {
          width: 25px;
          height: 25px;
        }

        .icon-pair-item {
            width: 42px;
            height: 42px;
            background-color: #ffd3d3;
            border-radius: 12px;
            box-shadow: 0 2px 5px #0000000d;
        }

         .icon-pair-item-2 {
            width: 42px;
            height: 42px;
            background-color: #d3dbff;
            border-radius: 12px;
            box-shadow: 0 2px 5px #0000000d;
        }

        .icon-pair-item-3 {
            width: 42px;
            height: 42px;
            background-color: #d3ffeb;
            border-radius: 12px;
            box-shadow: 0 2px 5px #0000000d;
        }

        .icon-pair-item-4 {
            width: 42px;
            height: 42px;
            background-color: #fffed3;
            border-radius: 12px;
            box-shadow: 0 2px 5px #0000000d;
        }

        .icon-pair-item-5{
          width: 42px;
          height: 42px;
          background-color: #dab8ff;
          border-radius: 12px;
          box-shadow: 0 2px 5px #0000000d;
        }

        .icon-pair-item i {
            font-size: 1.3rem;
        }

        .icon-pair-item-2 i{
          font-size: 1.3rem;
        }

        .icon-pair-item-3 i{
          font-size: 1.3rem;
        }

        .icon-pair-item-4 i{
          font-size: 1.3rem;
        }
        
        .icon-color-1 { 
          color: #fe0707; 
        }

        .icon-color-2 { 
          color: #0055A5; 
        }

        .icon-color-3 { 
          color: #076128; 
        }

        .icon-color-4 { 
          color: #ffb91d; 
        } 
        
        .card-gradient-1 { 
          background: linear-gradient(to bottom right, #fcfcfc, #e0e0e0); 
        }

        .card-gradient-2 { 
          background: linear-gradient(to bottom right, #fcfcfc, #e0e0e0); 
        }

        .card-gradient-3 { 
          background: linear-gradient(to bottom right, #fcfcfc, #e0e0e0); 
        }

        .card-gradient-4 { 
          background: linear-gradient(to bottom right, #fcfcfc, #e0e0e0); 
        } 

        .card-title {
            color: #333;
            font-size: 1.35rem; 
        }

        .card-text {
            color: #666;
            line-height: 1.6;
            font-size: 0.95rem;
            height: 4.8em; 
            margin-bottom: 2rem !important; 
        }

        .custom-btn-gov {
            background-color: #fff9;
            color: #444;
            font-size: 0.9rem;
            border-radius: 20px;
            padding: 8px 18px;
            border: 1px solid #0000000d;
            transition: all 0.2s ease-in-out;
            gap: 5px;
        }

        .custom-btn-gov:hover {
            background-color: #fff;
            color: #000;
            box-shadow: 0 4px 10px #00000014;
            transform: translateY(-2px);
        }

        /* Solutions */
        .section-subtitle-gov {
            color: #fe0707;
            font-size: 0.85rem;
            letter-spacing: 1px;
        }

        .section-subtitle-ent {
            color: #fe0707;
            font-size: 0.85rem;
            letter-spacing: 1px;
        }

        .section-title-gov {
            color: #1a202c;
            font-size: 2.25rem;
        }

        .solution-card-wrapper {
            padding-top: 30px; 
        }

        .solution-card {
            background: linear-gradient(to bottom right, #fcfcfc, #e0e0e0ac);
            border-radius: 28px;
            box-shadow: 0 8px 24px #0000000a;
            border: 1px solid #00000005;
            padding: 3.5rem 2rem 2rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .solution-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px #00000014;
        }

        .icon-tab {
            top: -25px; 
            left: 50%;
            transform: translateX(-50%);
            width: 70px;
            height: 60px;
            border-radius: 16px;
            box-shadow: 0 8px 16px #00000008;
            z-index: 10;
        }

        .icon-tab-proba{
          background-color: #e0f2fe;
        }

        .icon-tab-complyon{
          background-color: #e2e8f0;
        }

        .icon-tab-engage{
          background-color: #c1e4fc;
        }

        .icon-tab-orcaa{
          background-color: #dab8ff;
        }

        .icon-tab-xverdict{
          background-color: #caffe5;
        }

        .icon-tab-workflows{
          background-color: #c18cfad1;
        }

        .icon-img {
            width: 35px;
            height: 35px;
        }

        .icon-img-engagenet{
          width: 30px;
          height: 30px;
        }

        .icon-img-xverdict{
          width: 22px;
          height: 22px;
        }

        .card-brand {
            font-size: 1.25rem;
            color: #2d3748;
        }

        .card-desc {
            font-size: 0.9rem;
            line-height: 1.6;
            color: #718096;
        }

        .card-modules {
            font-size: 0.8rem;
            color: #a0aec0;
            letter-spacing: 0.5px;
        }

        .explore-btn {
            padding: 8px 24px;
            border-radius: 20px;
            background-color: #f8f9fa;
            border: 1px solid #edf2f7;
            gap: 6px;
            color: #4a5568;
            font-size: 0.9rem;
            transition: all 0.2s ease;
        }

        .explore-btn:hover {
            transform: scale(1.03);
            box-shadow: 0 15px 18px #00000005;
        }

        /* AIC-ONE In Action */
        .header {
            margin-bottom: 5rem;
            z-index: 10;
        }

        .sub-header{
          color: #64748b; 
          margin-top: 10px; 
        }

        #svg-canvas {
            position: absolute;
            top: 0; 
            left: 0;
            width: 100%; 
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .connection-path {
            fill: none;
            stroke: #cbd5e1;
            stroke-width: 2;
            stroke-dasharray: 6, 6;
        }

        .board-container {
            max-width: 1000px;
            gap: 2rem;
            z-index: 2;
        }

        /* Staggered positioning */
        .pin-card:nth-child(odd) {
           margin-right: auto; 
           margin-left: 10%; 
           transform: rotate(-2deg); 
          }

        .pin-card:nth-child(even) { 
          margin-left: auto; 
          margin-right: 10%; 
          transform: rotate(2deg); 
        }
        
        @media (width <= 768px) {
            .pin-card:nth-child(odd), .pin-card:nth-child(even) {
                margin-left: 0; 
                margin-right: 0; 
                transform: rotate(0);
            }
        }

        .pin-card {
            border-radius: 24px;
            padding: 12px;
            max-width: 380px;
            box-shadow: 0 20px 40px -15px #0000001a, 0 0 10px #00000008;
            transition: transform 0.3s ease;
        }

        .pin-card:hover {
            transform: translateY(-5px) scale(1.02) !important;
            z-index: 10;
        }

        .card-inner {
            border-radius: 16px;
            padding: 2rem 1.5rem;
             }

        .pin {
            width: 22px;
            height: 22px;
            top: -5px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 5;
            box-shadow: inset -5px -5px 10px #0003, inset 3px 3px 5px #fff9, 0 10px 15px -3px #0000004d;
        }

        /* Pin Shadow */
        .pin::after {
            content: '';
            position: absolute;
            width: 30px;
            height: 10px;
            background: #00000026;
            border-radius: 50%;
            bottom: -15px;
            left: -10px;
            filter: blur(4px);
            z-index: -1;
        }

        .step-number {
            font-family: Caveat, cursive;
            font-size: 2.5rem;
            line-height: 1;
            margin-bottom: 0.5rem;
        }

        .module-name {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-light);
            margin-bottom: 0.2rem;
        }

        .card-title-gov {
            font-size: 1.25rem;
            margin-bottom: 0.8rem;
            color: var(--text-main);
        }

        .card-desc-gov {
            font-size: 0.85rem;
            color: var(--text-light);
            line-height: 1.6;
        }

        /* Themes */
        .theme-blue .card-inner { 
          background-color: var(--bg-blue); 
        }

        .theme-blue .step-number { 
          color: var(--c-blue); 
        }

        .theme-blue .pin { 
          background: radial-gradient(circle at 30% 30%, #60a5fa, #2563eb); 
        }

        .theme-purple .card-inner { 
          background-color: var(--bg-purple); 
        }

        .theme-purple .step-number { 
          color: var(--c-purple); 
        }

        .theme-purple .pin { 
          background: radial-gradient(circle at 30% 30%, #a78bfa, #7c3aed); 
        }

        .theme-green .card-inner { 
          background-color: var(--bg-green); 
        }

        .theme-green .step-number { 
          color: var(--c-green); 
        }

        .theme-green .pin { 
          background: radial-gradient(circle at 30% 30%, #4ade80, #16a34a); 
        }

/* Case Study */
.dwypd-case-study {
        background-color: #f8f9fc; /* Light gray background to match image */
        padding: 5rem 2rem;
        color: #111827;
    }

    .dwypd-wrapper {
        max-width: 1200px;
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 6rem;
    }

    .dwypd-content {
        position: sticky;
        top: 65px; 
    }

    .dwypd-heading {
        font-size: 2.5rem;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -1px;
        margin-bottom: 2.5rem;
    }

    .dwypd-heading .text-red {
        color: #fe0707; 
    }

    .dwypd-subtitle {
        font-size: 16px;
        color: #1f2937;
    }

    .dwypd-paragraph {
        font-size: 0.95rem;
        color: #6b7280;
        line-height: 1.7;
    }

    .dwypd-features {
        gap: 1rem; 
        padding-bottom: 20vh; 
    }

    .feature-item {
        cursor: pointer;
        transition: all 0.3s ease;
        opacity: 1; 
      }

    .feature-icon-box {
        width: 50px;
        height: 50px;
        background-color: #fff;
        color: #4b5563;
        transition: all 0.3s ease;
        border: 1px solid #e5e7eb;
    }

    .feature-text-content {
        padding-top: 0.25rem;
    }

    .feature-title {
        font-size: 16px;
        color: #111827;
        transition: color 0.3s ease;
    }

    .feature-desc {
        font-size: 0.9rem;
        color: #6b7280;
        line-height: 1.6;
    }

   .feature-item.active {
        opacity: 1; 
    }

    .feature-item.active .feature-icon-box {
        background-color: #fe0707;
        color: #fff;
        border-color: #c21515;
        box-shadow: 0 10px 25px -5px #eb252580;
        transform: scale(1.1);
    }

    .feature-item.active .feature-title {
        color: #111827;
    }

    @media (width <= 968px) {
        .dwypd-wrapper {
            grid-template-columns: 1fr;
            gap: 3rem;
        }
      
        .dwypd-content {
            position: relative;
            top: 0;
        }

        .dwypd-features {
            gap: 2rem;
            padding-bottom: 0;
        }
        
        .feature-item {
            opacity: 1; /* Keep fully visible on mobile */
        }
    }

    /* Table Section */
    .strategy-section {
        background-color: #f8fafc; 
        padding: 6rem 0;
    }

    .strategy-heading{
      letter-spacing: -1px;
    }

    .table-header {
        font-size: 0.8rem;
        letter-spacing: 1.5px;
        color: #64748b;
        border-bottom: 1px solid #cbd5e1;
    }

    .strategy-row {
        background-color: transparent;
        border-bottom: 1px solid #e2e8f0;
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .row-trigger {
        padding: 1.25rem 1rem;
        cursor: pointer;
        transition: background-color 0.2s ease;
        border-radius: 12px;
    }

    .strategy-row:not(.is-expanded):hover .row-trigger {
        background-color: #f3f3f3;
    }

    .strategy-row.is-expanded {
        background-color: #fff;
        border-color: transparent;
        box-shadow: 0 10px 25px -5px #0000000d, 0 8px 10px -6px #0003;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .pain-point-text {
        color: #0f172a;
        font-size: 1rem;
    }

    .module-badge {
        gap: 0.5rem;
        font-size: 0.8rem;
        color: #334155;
    }

    .module-badge i {
        color: #fe0707; 
    }

    .chevron-icon {
        color: #94a3b8;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 0.9rem;
    }

    .strategy-row.is-expanded .chevron-icon {
        transform: rotate(180deg);
        color: #0f172a;
    }

    .deployment-action-panel {
        display: none; 
        padding: 0 1rem 2rem;
    }

    .panel-inner {
        padding: 1.5rem 2rem 0;
        border-top: 1px dashed #e2e8f0;
        margin-top: 0.5rem;
    }

    .panel-inner h5 {
        color: #0f172a;
        font-size: 1.1rem;
        margin-bottom: 0.8rem;
    }

    .panel-inner p {
        color: #475569;
        font-size: 0.95rem;
        line-height: 1.7;
        margin-bottom: 1.5rem;
        max-width: 800px;
    }

    .btn-route-solution {
        gap: 0.5rem;
        background-color: #0f172a;
        color: #fff;
        padding: 0.6rem 1.5rem;
        font-size: 0.85rem;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .btn-route-solution:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px #0f172a33;
    }

    /* CTA */
    .cta-section-bg {
        background-image: 
            linear-gradient(#ffffff08 1px, transparent 1px),
            linear-gradient(90deg, #ffffff08 1px, transparent 1px);
        background-size: 50px;
    }

    .cta-section{
      padding-bottom: 100px;
    }

    .cta-card {
        background: linear-gradient(135deg, #ff5858 0%, #ff2424 100%);
        border: 1px solid #ffffff1a;
        box-shadow: 0 25px 50px -12px #0596694d;
        max-width: 1050px;
    }

    .cta-icon{
        width: 56px; 
        height: 56px; 
        background-color: #fff3; 
        backdrop-filter: blur(5px); 
        border: 1px solid #ffffff4d;
    }

    .cta-header{
      letter-spacing: -1px;
    }

    .cta-sub{
      max-width: 650px;
      line-height: 1.6;
      font-size: 16px;
    }

    .cta-card-pattern {
        inset:0;
        background-image: url('data:image/svg+xml;utf8,<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"><rect x="10" y="20" width="25" height="25" fill="rgba(255,255,255,0.04)"/><rect x="70" y="60" width="40" height="40" fill="rgba(255,255,255,0.03)"/><rect x="30" y="90" width="15" height="15" fill="rgba(255,255,255,0.05)"/></svg>');
        pointer-events: none;
    }

    .btn-cta-primary {
        background-color: #fff;
        color: #ff2424;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-cta-primary:hover {
        background-color: #f8f9fa;
        color: #fe0707;
        transform: translateY(-2px);
        box-shadow: 0 10px 20px #0000001a;
    }

    .btn-cta-outline {
        color: #fff;
        border: 1px solid #ffffff80;
        backdrop-filter: blur(4px);
        transition: all 0.3s ease;
    }

    .btn-cta-outline:hover {
        background-color: #ffffff26;
        color: #fff;
        border-color: #fff;
        transform: translateY(-2px);
    }

    /* New Landing Ent - Austin */
    .static-hero-box-ent {
            min-height: 560px;
            border-radius: 40px;
            background: linear-gradient(to bottom, #000000de, #000c), url('/assets/enterprise.jpg') center/cover no-repeat; 
        }

    #sector-bundles{
      scroll-margin-top: 70px;
    }

  /* Mpeoa */
  .bento-section {
      padding: 60px 0;
  }

  .bento-card {
      background-color: #fff;
      border-radius: 28px;
      padding: 28px;
      border: 1px solid #0000000a;
      box-shadow: 0 8px 24px #00000008;
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  .bento-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 35px #0000000f;
      border-color: #00000014;
  }

  .bento-text-content {
      z-index: 2;
  }

  .bento-card p {
      font-size: 0.875rem;
      color: #6c757d;
      margin-bottom: 0;
      line-height: 1.5;
  }

  .card-action-buttons {
      gap: 10px;
      margin-top: 15px;
      opacity: 1;
      visibility: visible;
      transform: translateY(10px);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  .card-action-buttons .btn {
      font-size: 12px;
      padding: 6px 16px;
  }

  .mock-ui-box {
      background: #f8f9fa;
      border-radius: 16px;
      box-shadow: 0 10px 25px #00000008;
      transition: all 0.4s ease;
      border: 1px solid #00000005;
  }

  .mock-ui-box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 10%;
      right: 10%;
      height: 3px;
      background: linear-gradient(90deg, #ff7a00, #ff007a, #7a00ff, #007aff);
      border-radius: 3px 3px 0 0;
      opacity: 0.8;
  }

  .mock-line { 
    height: 6px; 
    border-radius: 3px; 
    background: #e9ecef; 
    margin-bottom: 10px; 
    width: 30%; 
    background: #0d6efd; 
    height: 8px;
  }

  .bar-one{
    left: 20px; 
    height: 60px;
  }

  .bar-two{
    left: 45px; 
    height: 40px; 
    transition-delay: 0.1s;
  }

  .bar-third{
    left: 70px; 
    height: 30px; 
    transition-delay: 0.2s;
  }

  .bar-four{
    left: 95px; 
    height: 50px; 
    transition-delay: 0.3s;
  }

  .bento-graphic {
      height: 160px;
      margin: 15px 0;
  }

  .g-aicone-dashboard { 
    width: 140px; 
    height: 130px; 
    padding: 15px; 
  }

  .aic-one-chart-bar { 
    bottom: 15px; 
    width: 14px; 
    background: #dee2e6; 
    border-radius: 4px; 
    transition: all 0.5s ease; 
  }

  .bar-gap {  
    border: 2px dashed #ced4da; 
  }

  .bento-card:hover .aic-one-chart-bar { 
    background: #0d6efd; 
    transform: scaleY(1.1); 
    border: none; 
  }

  .bento-card:hover .bar-gap { 
    background: #198754; 
    height: 70px !important; 
  }

  .g-orcaa-brain { 
    width: 50px; 
    height: 50px; 
    background: #70459b; 
    border-radius: 24px; 
    z-index: 3; 
    transition: all 0.4s ease; 
  }
        
  .g-orcaa-brain::before { 
    content: ''; 
    position: absolute; 
    inset: -2px; 
    background: linear-gradient(135deg, #ff7a00, #ff007a, #007aff); 
    z-index: -1; 
    border-radius: 26px; 
    opacity: 0.5; 
    transition: all 0.4s ease; 
  }

  .bento-card:hover .g-orcaa-brain::before { 
    opacity: 1; 
    filter: blur(8px); 
  }

  .orcaa-satellite { 
    width: 30px; 
    height: 30px; 
    background: #fff; 
    border-radius: 50%; 
    box-shadow: 0 4px 10px #0000000f; 
    font-size: 12px; color: #adb5bd; 
    transition: all 0.5s ease; 
    border: 1px solid #e9ecef; 
  }

  .sat-1 { 
    left: 15%; 
    top: 20%; 
  } 
  
  .sat-2 { 
    right: 15%; 
    top: 20%; 
  } 
  
  .sat-3 { 
    bottom: 10%; 
    left: 50%; 
    transform: translateX(-50%);
  }

  .bento-card:hover .orcaa-satellite { 
    color: #007aff; 
    border-color: #007aff; 
    box-shadow: 0 0 15px #007aff33;
  }
  
  .bento-card:hover .sat-1 { 
    top: 35%; 
    left: 25%; 
  }
  
  .bento-card:hover .sat-2 { 
    top: 35%; 
    right: 25%; 
  }

  .engagenet-bubble { 
    background: #fff; 
    border-radius: 12px 12px 0; 
    padding: 8px 12px; 
    box-shadow: 0 4px 12px #0000000f; 
    transition: all 0.4s ease; 
    font-size: 11px; 
    border: 1px solid #f8f9fa;
  }
  
  .bubble-1 { 
    top: 20px; 
    left: 15%; 
    color: #EA4335; 
  }
  
  .bubble-2 { 
    top: 60px; 
    right: 20%; 
    color: #6c757d; 
    border-radius: 12px 12px 12px 0;
  }

  .bubble-alert { 
    top: -5px; 
    right: -5px; 
    width: 12px; 
    height: 12px; 
    background: #dc3545; 
    border-radius: 50%; 
    border: 2px solid #fff; 
    opacity: 0; 
    transform: scale(0); 
    transition: all 0.3s ease 0.2s;
  }

  .bento-card:hover .bubble-alert { 
    opacity: 1; 
    transform: scale(1); 
  }
  
  .bento-card:hover .bubble-1 { 
    transform: translateY(-5px); 
  }

  .bento-card:hover .bubble-2 { 
    color: #0d6efd; 
    transform: translateY(5px); 
  }

  .workflow-node { 
    width: 40px; 
    height: 40px; 
    background: #fff; 
    border-radius: 8px; 
    box-shadow: 0 4px 10px #0000000d; 
    z-index: 2; 
    transition: all 0.5s ease; 
    border: 1px solid #e9ecef;
  }

  .w-node-1 { 
    left: 20px; 
    color: #6c757d;
  }

  .w-node-2 { 
    right: 20px; 
    color: #6c757d;
  }

  .w-connector { 
    height: 3px; 
    background: #e9ecef; 
    width: 0; 
    left: 60px; 
    z-index: 1; 
    transition: width 0.5s ease 0.1s; 
  }
  
  .bento-card:hover .w-connector { 
    width: calc(100% - 120px); 
    background: #0d6efd; 
  }

  .bento-card:hover .w-node-1 { 
    border-color: #0d6efd; 
    color: #0d6efd; 
    transform: translateX(10px);
  }

  .bento-card:hover .w-node-2 { 
    border-color: #198754; 
    color: #198754; 
    background: #e8f5e9; 
    transform: translateX(-10px);
  }

  .g-complyon-checklist { 
    width: 150px; 
    height: 130px; 
    padding: 15px; 
  }

  .comply-item { 
    gap: 8px; 
    margin-bottom: 12px; 
  }

  .comply-status { 
    width: 16px; 
    height: 16px; 
    border-radius: 50%;   
    font-size: 9px; 
    transition: all 0.4s ease;
  }

  .scan-line { 
    inset: 0;
    width: 2px; 
    background: #0d6efd; 
    opacity: 0; 
    transition: all 0.6s ease; 
    box-shadow: 0 0 8px #0d6efd;
  }

  .bento-card:hover .scan-line { 
    opacity: 1; 
    left: 100%; 
  }

  .status-fraud { 
    border: 2px solid #dc3545; 
    color: #dc3545; 
  }

  .bento-card:hover .status-fraud { 
    background: #198754; 
    border-color: #198754; 
    color: #fff; 
    transition-delay: 0.3s;
  }

  .bento-card:hover .status-fraud i::before { 
    content: '\f00c'; 
  }

  .x-verdict-stack { 
    width: 130px; 
    height: 120px; 
  }
  
  .x-case {  
    height: 50px; 
    background: #fff; 
    border-radius: 8px; 
    box-shadow: 0 4px 10px #0000000d; 
    border: 1px solid #e9ecef; 
    transition: all 0.5s ease; 
    padding: 10px; 
  }

  .x-case-1 { 
    top: 0; 
    left: -20px; 
    transform: rotate(-12deg); 
    z-index: 1;
  }

  .x-case-2 { 
    top: 30px; 
    left: 20px; 
    transform: rotate(10deg); 
    z-index: 2;
  }

  .x-case-3 { 
    top: 60px; 
    left: -10px; 
    transform: rotate(-5deg); 
    z-index: 3;
  }

  .bento-card:hover .x-case { 
    box-shadow: 0 2px 5px #00000008; 
  }
  
  .bento-card:hover .x-case-1 { 
    top: 0; 
    left: 0; 
    transform: rotate(0); 
  }

  .bento-card:hover .x-case-2 { 
    top: 15px; 
    left: 0; 
    transform: rotate(0); 
  }

  .bento-card:hover .x-case-3 { 
    top: 30px; 
    left: 0; 
    transform: rotate(0); 
    border-color: #dc3545; 
  }

  .family-products{
    max-width: 700px; 
  }

  .product-logo{
    height: 24px; 
  }

  .orcaa-img{
    width: 30px; 
    filter: brightness(0) 
    invert(1);
  }

  .workflow-ui{
    height: 100px; 
    max-width: 250px;
  }

  .line-style{
    width: 50%; 
    height: 8px; 
    margin-bottom: 15px;
  }

  .line-style-two{
    width: 60%;
  }

  .line-style-three{
    width: 40%;
  }

  .x-verdict-case{
    width: 8px; 
    height: 8px; 
    background: #dc3545; 
    margin-right: 8px;
  }

  
.custom-tab-btn.active {
    background-color: #fff !important;
    color: #212529 !important; 
    border-radius: 8px;
    box-shadow: 0 .125rem .25rem #00000013 !important; 
    font-weight: 700 !important; 
}

.custom-tab-btn {
    transition: all 0.2s ease-in-out;
}

.vodacom-bg{
  background-color: #e60000;
}


/* Tlotliso Product page */

/* Ent Hero */
.hero-section-ent {
    background-color: #fdfbfe;
    margin: 5.5rem 2rem; 
    border-radius: 32px; 
    padding: 6rem 0; 
    height: 85vh !important;
}

.hero-section-ent::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: radial-gradient(circle, #a08cc899 1.2px, transparent 1.2px);
    background-size: 32px 32px; /* Slightly wider spacing */
}

.mesh-bg {
    z-index: 0;
    top: 0; 
    left: 0;
    background: #fdfcff;
}

.mesh-blob {
    filter: blur(140px); /* Increased blur for an even smoother wash of color */
    z-index: 0;
    opacity: 0.8;
}

.mesh-blob-1-xverdict {
    top: -10%;
    left: -5%;
    width: 45vw;
    height: 45vw;
    background: #1a3d3dde; 
}

.mesh-blob-2-xverdict {
    top: -20%;
    right: -10%;
    width: 60vw;
    height: 65vw;
    background: #1a3d3dce; 
}

.mesh-blob-3-xverdict {
    bottom: -10%;
    right: 25%;
    width: 40vw;
    height: 30vw;
    background: #b7b3bc; 
}

.mesh-blob-1-proba {
    top: -10%;
    left: -5%;
    width: 45vw;
    height: 45vw;
    background: #84a4e9; 
}

.mesh-blob-2-proba {
    top: -20%;
    right: -10%;
    width: 60vw;
    height: 65vw;
    background: #a1cefc; 
}

.mesh-blob-3-proba {
    bottom: -10%;
    right: 25%;
    width: 40vw;
    height: 30vw;
    background: #90befa; 
}

.mesh-blob-1-engage {
    top: -10%;
    left: -5%;
    width: 45vw;
    height: 45vw;
    background: #3c69c9; 
}

.mesh-blob-2-engage {
    top: -20%;
    right: -10%;
    width: 60vw;
    height: 65vw;
    background: #2d7ecf; 
}

.mesh-blob-3-engage {
    bottom: -10%;
    right: 25%;
    width: 40vw;
    height: 30vw;
    background: #4b85d1; 
}

.mesh-blob-1-comply {
    top: -10%;
    left: -5%;
    width: 45vw;
    height: 45vw;
    background: #89a49b; 
}

.mesh-blob-2-comply {
    top: -20%;
    right: -10%;
    width: 60vw;
    height: 65vw;
    background: #82bea8; 
}

.mesh-blob-3-comply {
    bottom: -10%;
    right: 25%;
    width: 40vw;
    height: 30vw;
    background: #a3d3be; 
}

.mesh-blob-1-orcaa {
    top: -10%;
    left: -5%;
    width: 45vw;
    height: 45vw;
    background: #6b4491dc; 
}

.mesh-blob-2-orcaa {
    top: -20%;
    right: -10%;
    width: 60vw;
    height: 65vw;
    background: #6b4491bf; 
}

.mesh-blob-3-orcaa {
    bottom: -10%;
    right: 25%;
    width: 40vw;
    height: 30vw;
    background: #b7b3bc; 
}

.mesh-blob-1-probaworkflows {
    top: -10%;
    left: -5%;
    width: 45vw;
    height: 45vw;
    background: #7c3aed7f; 
}

.mesh-blob-2-probaworkflows {
    top: -20%;
    right: -10%;
    width: 60vw;
    height: 65vw;
    background: #7c3aed8f; 
}

.mesh-blob-3-probaworkflows {
    bottom: -10%;
    right: 25%;
    width: 40vw;
    height: 30vw;
    background: #b7b3bc; 
}

.hero-section-ent .container {
    z-index: 10;
}

/* Mesh blob gov */
.mesh-blob-comply-1{
  background: #1a4d3d !important;
}

.mesh-blob-comply-2{
  background: #359471 !important;
}

.mesh-blob-comply-3{
  background: #89ccaf !important;
}

.mesh-blob-orcaa-1{
  background: #1b2f51 !important;
}

.mesh-blob-orcaa-2{
  background: #6a4491 !important;
}

.mesh-blob-orcaa-3{
  background: #9c67d1 !important;
}

.mesh-blob-probaworkflows-1{
  background: #c4b5fd !important;
}

.mesh-blob-probaworkflows-2{
  background: #a78bfa !important;
}

.mesh-blob-probaworkflows-3{
  background: #8b5cf6 !important;
}

.badge-enterprise-probaworkflows{
  background-color: #8b5cf6 !important;
}

.mesh-blob-engage-1{
  background: #0d3a8a !important;
}

.mesh-blob-engage-2{
  background: #0259f3 !important;
}

.mesh-blob-engage-3{
  background: #208bff !important;
}

.mesh-blob-xverdict-1{
  background: #1a3d3d !important;
}

.mesh-blob-xverdict-2{
  background: #206564 !important;
}

.mesh-blob-xverdict-3{
  background: #309c97 !important;
}



@keyframes float-glow {
    0% { 
        transform: translate(0, 0) scale(1) rotate(0deg); 
    }

    50% { 
        transform: translate(5vw, 8vh) scale(1.05) rotate(5deg); 
    }

    100% { 
        transform: translate(-5vw, -4vh) scale(0.95) rotate(-5deg); 
    }
}

.hero-subtitle {
    color: #020202;
    line-height: 1.6;
    max-width: 600px;
}

.badge-enterprise {
    background-color: #06f;
    color: #fff;
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
}

.badge-enterprise-comply{
  background-color: #1a4d3d !important;
}

.badge-enterprise-orcaa{
  background-color: #6a4491 !important;
}

.badge-enterprise-engage{
  background-color: #0d3a8a;
}

.badge-enterprise-xverdict{
  background-color: #1d3a3a;
}

.badge-certified {
    background-color: #ffffffe6;
    backdrop-filter: blur(10px);
    color: #475569;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.6rem 1rem;
    border: 1px solid #0000000d;
    box-shadow: 0 4px 14px #00000008;
}

.icon-blue { 
    color: #06f; 
}

.contact-link {
    color: #475569;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.contact-link:hover {
    color: #0b0f19;
}

.proba-cta{
  background: linear-gradient(135deg, #002a79 0%, #67b2d8 100%) !important;
}

.complyon-cta{
  background: linear-gradient(135deg, #007973 0%, #1a4d3d 100%) !important;
}

.orcaa-cta{
  background: linear-gradient(135deg, #1b2f51 0%, #6a4491 100%) !important;
}

.proba-workflows-cta{
  background: linear-gradient(135deg, #1b2f51 0%, #6a4491 100%) !important;
}

.orcaa-cta{
  background: linear-gradient(135deg, #1b2f51 0%, #6a4491 100%) !important;
}

.proba-workflows-cta{
  background: linear-gradient(135deg, #1b2f51 0%, #6a4491 100%) !important;
}

.engage-cta{
  background: linear-gradient(135deg, #0d3a8a 0%, #0259f3 100%) !important;
}

.xverdict-cta{
  background: linear-gradient(135deg, #247d7b 0%, #1d3a3a 100%) !important;
}

/* Sizing for the circular icons */

.journey-icon {
    z-index: 2 !important;
}

.cta-logo-comply{
  max-height: 50px; 
  width: auto;
}

.mesh-blob-1 {
    background: #1e58d7;
    width: 70vw; 
    height: 50vh;
    top: 15%; 
    left: -15%;
    transform: rotate(-15deg);
}

.mesh-blob-2 {
    background: #3c8cf5;
    width: 60vw; 
    height: 60vh;
    top: 30%; 
    right: -10%;
    animation-delay: -5s;
}

.mesh-blob-3 {
    background: #61adf9;
    width: 50vw; 
    height: 50vh;
    bottom: 10%; 
    left: 20%;
    animation-delay: -10s;
}

@keyframes float-glow {
    0% { 
        transform: translate(0, 0) scale(1) rotate(0deg); 
    }

    50% { 
        transform: translate(5vw, 8vh) scale(1.05) rotate(5deg); 
    }

    100% { 
        transform: translate(-5vw, -4vh) scale(0.95) rotate(-5deg); 
    }
}

/* New landing - Partners - Austin */
 .static-hero-box-partners {
            min-height: 560px;
            border-radius: 40px;
            background: linear-gradient(to bottom, #000000a1, #000c), url('/assets/partners.jpg') center/cover no-repeat; 
        }

    /* Why Resell Section */
    .section-title-resell {
        color: #232323;
        line-height: 1.4;
    }

    .highlight-red {
        background-color: #fe0707;
        border-radius: 0.3rem;
    }

    .service-card {
        border-radius: 24px;
        padding: 2.5rem 2rem;
        transition: transform 0.3s ease;
    }

    .service-card:hover {
        transform: translateY(-5px);
    }

    .service-card-header {
        font-size: 1.1rem;
    }

    .service-card-text {
        color: #a1a1a1;
        font-size: 0.85rem;
        line-height: 1.6;
    }

    .card-dark {
        background-color: #232323;
        color: #fff;
    }
    
    .icon-circle {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }

    .icon-bg-red { 
      background-color: #fe0707; 
      color: #232323; 
    }

    /* How It Works */
    .section-title-how {
        font-size: 2.2rem;
        color: #1a1a1a;
    }

    .section-subtitle-how {
        color: #777;
        max-width: 600px;
        font-size: 1rem;
        line-height: 1.6;
    }

    .timeline-container {
        z-index: 1;
        margin-top: 4rem;
    }

    .connecting-line {
        top: 60px; 
        left: 16%;
        width: 68%;
        height: 0;
        border-top: 2px dashed #ccc;
        z-index: -1;
    }

    .step-wrapper {
        padding: 0 1rem;
    }

    .icon-outer-ring {
        width: 120px;
        height: 120px;
        margin: 0 auto 1.5rem;
        background-color: #fff;
    }

    .step-1 .icon-outer-ring,
    .step-2 .icon-outer-ring, 
    .step-3 .icon-outer-ring {
        border: 1px dashed #ffc0c0;
    }

    .icon-inner-circle {
        width: 65px;
        height: 65px;
        background-color: #fff0f0; 
        color: #fe0707; 
        font-size: 1.8rem;
    }

    .step-number {
        top: 0;
        left: -10px;
        width: 28px;
        height: 28px;
        background: transparent;
        color: #1a1a1a;
        font-size: 0.85rem;
        box-shadow: 0 2px 8px #00000014;
    }

    .step-title {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
        color: #1a1a1a;
    }

    .step-description {
        color: #777;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    @media (width <= 767px) {
        .connecting-line {
            display: none;
        }

        .step-wrapper {
            margin-bottom: 3rem;
        }

        .card-action-buttons {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
      }
    }
    
    /* Partner Tiers Section */
    .section-title-partners {
        font-size: 2.2rem;
        color: #1a1a1a;
    }

    .section-subtitle-partners {
        color: #777;
        max-width: 650px;
        font-size: 16px;
        line-height: 1.6;
    }

    .partner-card {
        background-color: #fff;
        border-radius: 24px;
        padding: 2.5rem 2rem;
        border: 1px solid #eaeaea;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .partner-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 40px #0000000f;
    }

    .partner-card-popular{
       border: 1px solid #f47373;
    }

    .badge-popular {
        top: 1.5rem;
        right: -2.5rem;
        background-color: #ff2424;
        color: #232323;
        font-size: 0.8rem;
        padding: 0.4rem 3rem;
        transform: rotate(45deg);
        letter-spacing: 1px;
    }

    .tier-title {
        font-size: 1.2rem;
        color: #1a1a1a;
    }

    .margin-highlight {
        font-size: 1.9rem;
        color: #232323;
        line-height: 1.1;
    }

    .margin-label {
        font-size: 0.75rem;
        color: #777;
        letter-spacing: 1px;
        margin-bottom: 2rem;
    }

    .feature-group {
        margin-bottom: 1rem;
    }

    .feature-group-title {
        font-size: 0.9rem;
        color: #1a1a1a;
        margin-bottom: 0.8rem;
        border-bottom: 1px solid #eaeaea;
        padding-bottom: 0.4rem;
    }

    .feature-list {
        list-style: none;
        }

    .feature-list li {
        font-size: 0.9rem;
        color: #555;
        margin-bottom: 0.8rem;
        align-items: flex-start;
    }

    .feature-list li i {
        color: #ff5858;
        font-size: 1.1rem;
        margin-right: 0.6rem;
        margin-top: -0.1rem;
    }

    .card-dark {
        background-color: #232323;
        color: #fff;
        border-color: #232323;
    }
    
    .partners-section .card-dark .tier-title,
    .partners-section .card-dark .margin-highlight,
    .partners-section .card-dark .feature-group-title {
        color: #fff;
        border-bottom-color: #444;
    }

    .partners-section .card-dark .margin-label,
    .partners-section .card-dark .feature-list li {
        color: #a1a1a1;
    }

    .btn-custom-outline {
        padding: 0.8rem;
        border-radius: 0.5rem;
        border: 2px solid #232323;
        color: #232323;
        background: transparent;
        transition: all 0.3s ease;
    }

    .btn-custom-outline-popular {
        padding: 0.8rem;
        border-radius: 0.5rem;
        border: 2px solid #232323;
        color: #fff;
        background-color: #232323;
        transition: all 0.3s ease;
    }

    .btn-custom-outline:hover {
        background: #232323;
        color: #fff;
        transition: all 0.3s ease;
        transform: translateY(-5px);
        box-shadow: 0 10px 20px #23232372;
    }

    .btn-custom-outline-popular:hover{
        transition: all 0.3s ease;
        transform: translateY(-5px);
        box-shadow: 0 10px 20px #23232372;
    }

    .card-dark .btn-custom-outline {
        color: #232323;
        background: #ff5858;
        transition: all 0.3s ease;
    }

    .card-dark .btn-custom-outline:hover {
        transition: all 0.3s ease;
        transform: translateY(-5px);
        box-shadow: 0 10px 20px #ff58586b; 
    }

    /* FAQ */
    .btn-brand-red{
      background-color: #fe0707;
      transition: all 0.3s ease;
    }

    .btn-brand-red:hover{
    background-color: #fe0707;
    transition: all 0.3s ease;
    transform: translateY(-5px);
    box-shadow: 0 5px 10px #d60000bf;
    }
    
.btn-outline-dark:hover{
  color: #000 !important;
}

/* aic one diagram */

.node-card {
  background: #ffffffd9;
  backdrop-filter: blur(12px);
  border: 1px solid #ffffff80;
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 12px 32px -12px #0f172a14;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 2;
}

.node-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px #0f172a1f;
}

.logo-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  box-shadow: inset 0 2px 4px #ffffff80, 0 4px 8px #0000000d;
}

.brand-proba { 
    background-color: #e0f2fe; 
}

.brand-complyon { 
    background-color: #e2e8f0; 
}

.brand-engage { 
    background-color: #c1e4fc; ; 
}

.brand-orcaa { 
    background-color: #dab8ff; 
}

.brand-xverdict { 
    background-color: #caffe5;
}

.brand-probaw { 
    background-color: #c18cfa; 
    color: #9333ea; 
}     

.brand-logo {
  max-width: 70%;
  max-height: 70%;
}

.expand-btn {
  color: #3b82f6;
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: background 0.2s;
}

.expand-btn:hover { 
    background: #eff6ff; 
}

.expand-btn[aria-expanded="true"] .chevron-diagram { 
    transform: rotate(180deg); 
}

.chevron-diagram { 
    display: inline-block; 
    transition: transform 0.3s ease; 
}

.sub-node {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px #00000005;
}

.clean-list {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
  font-size: 0.85rem;
  color: #475569;
}

.clean-list li { 
    margin-bottom: 0.4rem; 
    padding-left: 1.2rem; 
}

.clean-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #cbd5e1;
}

.flow-bracket-bottom {
  border: 2px dashed #cbd5e1;
  border-top: none;
  border-radius: 0 0 16px 16px;
}

.flow-bracket-top {
  border: 2px dashed #cbd5e1;
  border-bottom: none;
  border-radius: 16px 16px 0 0;
}

.flow-line-v {
  width: 2px;
  background-image: linear-gradient(to bottom, #cbd5e1 50%, transparent 50%);
  background-size: 2px 10px;
  background-repeat: repeat-y;
}

.core-platform-card {
  background: #ffffffb3;
  backdrop-filter: blur(16px);
  border: 1px solid #fff;
  border-radius: 24px;
  box-shadow: 0 20px 40px -10px #0000000d;
}

.step-icon {
  width: 32px;
  height: 32px;
  border: 2px solid #cbd5e1;
  margin: 0 auto;
  color: #64748b;
}

.active-base { 
    background: linear-gradient(135deg, #fe0707 0%, #fe0707c2 100%); 
}

.step-connector {
  flex-grow: 1;
  height: 2px;
  background-color: #e2e8f0;
  margin: 0 1rem;
}

.flow-bracket-bottom {
  border: 2px dashed #cbd5e1;
  border-top: none;
  border-radius: 0 0 16px 16px;
}

.flow-bracket-top {
  border: 2px dashed #cbd5e1;
  border-bottom: none;
  border-radius: 16px 16px 0 0;
}

.flow-line-v {
  width: 2px;
  background-image: linear-gradient(to bottom, #cbd5e1 50%, transparent 50%);
  background-size: 2px 10px;
  background-repeat: repeat-y;
}

.diagram-tail{
   height: 20px;
}

.diagram-tail-two{
   height: 30px; 
   bottom: -30px;
}

.diagram-tail-three{
   height: 30px; 
   top: -30px;
}

.diagram-tail-four{
    height: 20px; 
    top: 0;
}

.header-title {
    font-size: 2.25rem;
    margin-bottom: 3.5rem;
    letter-spacing: -0.02em;
}

.ui-card {
    background: #fff;
    height: 380px; 
    border-radius: 32px; 
    padding: 28px;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.4s ease;
}

.ui-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px #0000000f, 0 12px 24px #0000000a;
}

.ui-card::before, .ui-card::after, .ring-inner {
    content: '';
    position: absolute;
    border: 1px solid #f4f8ff;
    border-radius: 50%;
    bottom: -20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    transition: all 0.5s ease;
}

.ui-card::before { 
    width: 350px; 
    height: 350px; 
}

.ui-card::after { 
    width: 250px; 
    height: 250px; 
}

.ring-inner { 
    width: 150px; 
    height: 150px; 
}

.ui-card:hover::before { 
    transform: translateX(-50%) scale(1.05); 
    border-color: #ef44440d; 
}

.ui-card:hover::after { 
    transform: translateX(-50%) scale(1.1); 
    border-color: #ef444414; 
}

.ui-card:hover .ring-inner { 
    transform: translateX(-50%) scale(1.15); 
    border-color: #ef44441f; 
}

.step-text {
    font-size: 0.65rem;
    color: #9ca3af;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    z-index: 2;
}

.title-text {
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    margin-bottom: 0;
    z-index: 2;
}

.graphic-area {
    flex-grow: 1;
    z-index: 2;
    margin: 15px 0;
}

.glass-panel {
    width: 110px;
    height: 75px;
    background: linear-gradient(135deg, #faf0f0e6 0%, #fff9 100%);
    backdrop-filter: blur(12px);
    border: 1px solid #fffc;
    border-radius: 16px;
    box-shadow: 0 10px 25px #ef44440d;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.graphic-area::before {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    background: #fee2e2;
    border-radius: 50%;
    filter: blur(15px);
    z-index: -1;
    transition: all 0.4s ease;
}

.glass-panel i {
    font-size: 2.2rem;
    color: #ef0707;
    transition: transform 0.3s ease;
}

.ui-card:hover .glass-panel {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 15px 35px #ef444426;
    background: linear-gradient(135deg, #fffffff2 0%, #ffffffd9 100%);
}

.ui-card:hover .graphic-area::before {
    background: #fca5a5;
    width: 90px;
    height: 90px;
}

.desc-text {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 24px;
    z-index: 2;
}

.bottom-badge {
    align-self: flex-start;
    background-color: #fff;
    color: #374151;
    font-size: 0.75rem;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #f3f4f6;
    box-shadow: 0 4px 10px #00000008;
    z-index: 2;
    transition: all 0.3s ease;
}

.ui-card:hover .bottom-badge {
    border-color: #d1d5db;
    color: #111827;
    background-color: #f9fafb;
}

.mobile-menu-overlay {
    top: 0;
    left: 100%;
    background: #fff;
    z-index: 10000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
}

.mobile-menu-overlay.active {
    left: 0;
    visibility: visible;
}

.mobile-links {
    gap: 25px;
}

.mobile-links a {
    font-size: 18px;
    color: #000;
    transition: color 0.2s;
}

.mobile-links a:active {
    color: #dc3545;
}

.mobile-menu-overlay .ai-campus-logo {
    height: auto;
    max-width: 140px;
}

.mobile-contact{
  color: white !important;
  font-size: 17px !important;
}