#top-primary-bar {
  position: fixed;
  bottom: 0;
  z-index: 3;
  width: 100%;
}

.primary-bar-container {
  background-color: var(--primaryColor);
}

.fixed-after-scroll {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 1020;
  transition: all 0.3s ease-in-out;
}
@media (max-width: 767.98px) {
  .fixed-after-scroll {
    top: 20px;
  }
}

.fixed-after-scroll.fixed {
  position: fixed;
  top: 0%;
  width: 100%;
  z-index: 1020;
  transition: all 0.3s ease-in-out;
}
@media (max-width: 767.98px) {
  .fixed-after-scroll.fixed {
    top: 0;
  }
}

.header-card {
  background-color: var(--cardBg);
  border-radius: 20px;
  border: 1px solid var(--themeBorder);
  position: relative;
  top: 0;
  margin: 1.5rem 0rem;
  z-index: 1020;
}
.header-card:hover {
  background-color: var(--cardHover);
}

.logo-container {
  position: relative;
}

.logo-container img {
  width: 100%;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.logo-container:hover img {
  filter: brightness(1.2) drop-shadow(0 0 10px rgba(139, 92, 246, 0.4));
  transform: scale(1.03);
}

/* Superintelligence Menu Icon Animation */
.superintelligence-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.superintelligence-icon svg {
  overflow: visible;
}

.superintelligence-icon .si-infinity {
  animation: siInfinityGlow 3s ease-in-out infinite;
}

.superintelligence-icon .si-pulse-dot {
  filter: drop-shadow(0 0 3px rgba(180,150,255,0.8));
}

@keyframes siInfinityGlow {
  0%, 100% { stroke: rgba(139,92,246,0.4); }
  50% { stroke: rgba(180,150,255,0.7); }
}

/* Neural network background for logo */
.logo-network-bg {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  z-index: 1;
  opacity: 0.6;
  pointer-events: none;
  display: none;
}

#logoNetworkCanvas {
  width: 100%;
  height: 100%;
}

header .container {
  max-width: 1560px;
}

.menu-container ul.parent-menu {
  font-size: 1.6rem;
}
.menu-container ul.parent-menu li.parent-menu-option {
  padding: 1rem;
  border-radius: 20px;
}
.menu-container ul.parent-menu li.parent-menu-option .mega-menu-container {
  z-index: 1000;
  background: rgba(10, 10, 15, 0.92);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  position: absolute;
  left: 0%;
  top: 110%;
  width: 100%;
  border-radius: 16px;
  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s;
  visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.menu-container ul.parent-menu li.parent-menu-option .mega-menu-container li {
  opacity: 0.5;
}
.menu-container ul.parent-menu li.parent-menu-option .mega-menu-container li:hover {
  opacity: 1;
}
.menu-container ul.parent-menu li.parent-menu-option .mega-menu-container .text-color-black-1a {
  color: var(--textColor);
}
.menu-container ul.parent-menu li.parent-menu-option .mega-menu2-container {
  z-index: 1001;
  background: rgba(10, 10, 15, 0.92);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  position: absolute;
  left: 0%;
  top: 110%;
  width: 100%;
  border-radius: 16px;
  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s;
  visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.menu-container ul.parent-menu li.parent-menu-option .mega-menu2-container li {
  opacity: 0.5;
}
.menu-container ul.parent-menu li.parent-menu-option .mega-menu2-container li:hover {
  opacity: 1;
}
.menu-container ul.parent-menu li.parent-menu-option .mega-menu2-container .text-color-black-1a {
  color: var(--textColor);
}
.menu-container ul.parent-menu li.parent-menu-option .mega-menu2-container .col-menu-heading {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.menu-container ul.parent-menu li.parent-menu-option:hover {
  background-color: var(--menuHover);
}
.menu-container ul.parent-menu li.parent-menu-option:hover .mega-menu-container, .menu-container ul.parent-menu li.parent-menu-option:hover .mega-menu2-container {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  border-color: rgba(139, 92, 246, 0.15);
  animation: menuBorderPulse 3s ease-in-out infinite;
}

@keyframes menuBorderPulse {
  0%, 100% {
    border-color: rgba(139, 92, 246, 0.15);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 30px rgba(139, 92, 246, 0.05);
  }
  50% {
    border-color: rgba(139, 92, 246, 0.25);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(139, 92, 246, 0.1);
  }
}
.menu-container ul.parent-menu li.parent-menu-option .menu-option img {
  max-width: 32px;
}

/* Enhanced Menu Option Styling */
.menu-option {
  position: relative;
  padding: 12px 16px;
  border-radius: 10px;
  background: transparent;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  opacity: 0;
  transform: translateY(15px);
}

/* Staggered animation for menu items */
.parent-menu-option:hover .menu-option {
  animation: menuItemReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.parent-menu-option:hover .col-6:nth-child(1) .menu-option { animation-delay: 0s; }
.parent-menu-option:hover .col-6:nth-child(2) .menu-option { animation-delay: 0.05s; }
.parent-menu-option:hover .col-6:nth-child(3) .menu-option { animation-delay: 0.1s; }
.parent-menu-option:hover .col-6:nth-child(4) .menu-option { animation-delay: 0.15s; }
.parent-menu-option:hover .col-4:nth-child(1) .menu-option { animation-delay: 0s; }
.parent-menu-option:hover .col-4:nth-child(2) .menu-option { animation-delay: 0.05s; }
.parent-menu-option:hover .col-4:nth-child(3) .menu-option { animation-delay: 0.1s; }
.parent-menu-option:hover .col-4:nth-child(4) .menu-option { animation-delay: 0.15s; }
.parent-menu-option:hover .col-4:nth-child(5) .menu-option { animation-delay: 0.2s; }
.parent-menu-option:hover .col-4:nth-child(6) .menu-option { animation-delay: 0.25s; }

@keyframes menuItemReveal {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Menu option hover effects */
.menu-option::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.menu-option::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
  border-radius: 3px 0 0 3px;
  transform: scaleY(0);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-option:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(5px);
}

.menu-option:hover::before {
  opacity: 1;
}

.menu-option:hover::after {
  transform: scaleY(1);
}

/* Menu option icon styling */
.menu-option img {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  filter: brightness(0.85);
  width: 32px;
  height: 32px;
}

.menu-option:hover img {
  filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
  transform: scale(1.15);
  animation: menuIconPulse 1.5s ease-in-out infinite;
}

@keyframes menuIconPulse {
  0%, 100% {
    filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
    transform: scale(1.15);
  }
  50% {
    filter: brightness(1.5) drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
    transform: scale(1.2);
  }
}

/* Kepler Icon Animation - Orbiting Satellite */
.menu-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kepler-icon svg {
  overflow: visible;
}

.kepler-icon .kepler-satellite {
  transform-origin: 24px 24px;
  animation: keplerOrbit 4s linear infinite;
}

.kepler-icon .kepler-satellite-2 {
  transform-origin: 24px 24px;
  animation: keplerOrbit 3s linear infinite reverse;
}

.kepler-icon .kepler-core {
  animation: keplerPulse 2s ease-in-out infinite;
}

.kepler-icon .kepler-orbit {
  animation: keplerOrbitFade 3s ease-in-out infinite;
}

.kepler-icon .kepler-orbit-2 {
  animation: keplerOrbitFade 3s ease-in-out infinite 0.5s;
}

@keyframes keplerOrbit {
  from { transform: rotate(0deg) translateX(0); }
  to { transform: rotate(360deg) translateX(0); }
}

@keyframes keplerPulse {
  0%, 100% { opacity: 0.9; r: 5; }
  50% { opacity: 1; r: 6; }
}

@keyframes keplerOrbitFade {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.4; }
}

/* Turing Icon Animation - Pulsing Grid */
.turing-icon svg {
  overflow: visible;
}

.turing-icon .turing-block {
  animation: turingPulse 2s ease-in-out infinite;
}

.turing-icon .turing-block.b1 { animation-delay: 0s; }
.turing-icon .turing-block.b2 { animation-delay: 0.15s; }
.turing-icon .turing-block.b3 { animation-delay: 0.3s; }
.turing-icon .turing-block.b4 { animation-delay: 0.1s; }
.turing-icon .turing-block.b5 { animation-delay: 0.25s; }
.turing-icon .turing-block.b6 { animation-delay: 0.4s; }
.turing-icon .turing-block.b7 { animation-delay: 0.2s; }
.turing-icon .turing-block.b8 { animation-delay: 0.35s; }
.turing-icon .turing-block.b9 { animation-delay: 0.5s; }

@keyframes turingPulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Digital Lifeforms & Defense Icons - Animations handled inline in SVG */

/* Public Safety Animation */
.safety-icon .safety-pulse {
  animation: safetyPulse 1.5s ease-out infinite;
  transform-origin: center;
}
.safety-icon .sp2 { animation-delay: 0.3s; }
.safety-icon .sp3 { animation-delay: 0.6s; }
.safety-icon .safety-head {
  animation: safetyHead 1.5s ease-in-out infinite;
}
@keyframes safetyPulse {
  0% { opacity: 0.4; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes safetyHead {
  0%, 100% { fill: rgba(255,255,255,0.8); }
  50% { fill: rgba(255,255,255,1); }
}

/* Intelligence Animation */
.intel-icon .intel-node {
  animation: intelNode 1s ease-in-out infinite;
}
.intel-icon .intel-core {
  animation: intelCore 1.5s ease-in-out infinite;
}
.intel-icon .intel-conn {
  animation: intelConn 0.8s ease-in-out infinite;
}
@keyframes intelNode {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@keyframes intelCore {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}
@keyframes intelConn {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.5; }
}

/* Transportation Animation - Car */
/* Animations handled inline in SVG */

/* Campus Security Animation */
.campus-icon .campus-building {
  animation: campusBuilding 2s ease-in-out infinite;
}
.campus-icon .campus-roof {
  animation: campusRoof 2s ease-in-out infinite;
}
.campus-icon .campus-pulse {
  animation: campusPulse 1.5s ease-out infinite;
  transform-origin: center;
}
@keyframes campusBuilding {
  0%, 100% { stroke: rgba(255,255,255,0.2); }
  50% { stroke: rgba(255,255,255,0.4); }
}
@keyframes campusRoof {
  0%, 100% { stroke: rgba(255,255,255,0.6); }
  50% { stroke: rgba(255,255,255,0.9); }
}
@keyframes campusPulse {
  0% { r: 4; opacity: 0.4; }
  100% { r: 12; opacity: 0; }
}

/* Non Profit Animation */
.nonprofit-icon .nonprofit-globe {
  animation: nonprofitGlobe 2s ease-in-out infinite;
}
.nonprofit-icon .nonprofit-heart {
  animation: heartBeat 1.2s ease-in-out infinite;
  transform-origin: center;
}
@keyframes nonprofitGlobe {
  0%, 100% { stroke: rgba(255,255,255,0.25); }
  50% { stroke: rgba(255,255,255,0.5); }
}
@keyframes heartBeat {
  0%, 100% { transform: scale(1); fill: rgba(255,255,255,0.8); }
  50% { transform: scale(1.1); fill: rgba(255,255,255,1); }
}

/* Resources Icons - Animations handled inline in SVG */

/* Menu option text styling */
.menu-option p.f-16 {
  font-weight: 500;
  color: #fff;
  transition: color 0.3s ease;
}

.menu-option:hover p.f-16 {
  color: #fff;
}

.menu-option p.opacity-50 {
  font-size: 13px;
  transition: opacity 0.3s ease;
}

.menu-option:hover p.opacity-50 {
  opacity: 0.7 !important;
}

/* Glow effect on hover */
.menu-option:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Moving purple gradient for mega menu */
.mega-menu-container::before,
.mega-menu2-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    125deg,
    transparent 0%,
    rgba(139, 92, 246, 0.03) 20%,
    rgba(107, 63, 160, 0.05) 40%,
    transparent 50%,
    rgba(139, 92, 246, 0.04) 70%,
    rgba(168, 85, 247, 0.03) 85%,
    transparent 100%
  );
  background-size: 300% 300%;
  border-radius: 16px;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.parent-menu-option:hover .mega-menu-container::before,
.parent-menu-option:hover .mega-menu2-container::before {
  opacity: 1;
  animation: menuGradientMove 8s ease-in-out infinite;
}

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

/* Subtle grid pattern in menu background */
.mega-menu-container,
.mega-menu2-container {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 30px 30px, 30px 30px;
}

/* Scan line effect on menu open */
.mega-menu-container::after,
.mega-menu2-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.3),
    transparent);
  opacity: 0;
  transform: translateY(0);
}

.parent-menu-option:hover .mega-menu-container::after,
.parent-menu-option:hover .mega-menu2-container::after {
  animation: menuScanLine 0.8s ease-out forwards;
}

@keyframes menuScanLine {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* Arrow indicator for menu items */
.menu-option > div:last-child {
  position: relative;
}

.menu-option > div:last-child::after {
  content: '→';
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-option:hover > div:last-child::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Animated connection lines between sections */
.mega-menu-container .row::before,
.mega-menu2-container .row::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent);
  transition: height 0.5s ease 0.2s;
}

.parent-menu-option:hover .mega-menu-container .row::before,
.parent-menu-option:hover .mega-menu2-container .row::before {
  height: 60%;
  transform: translateY(-50%);
}

/* Menu row needs position relative for the center line */
.mega-menu-container .row,
.mega-menu2-container .row {
  position: relative;
}

.border-right-sep {
  border-right: 1px solid rgba(26, 26, 26, 0.2);
}

.offcanvas-custom {
  background-color: var(--cardBg);
  color: var(--textColor);
}
.offcanvas-custom .offcanvas-header {
  border-bottom: 1px solid var(--borderColor);
}
.offcanvas-custom .close-offcanvas-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--menuHover);
  display: flex;
  justify-content: center;
  align-items: center;
}
.offcanvas-custom .close-offcanvas-btn i {
  font-weight: 700;
}

@media screen and (max-width: 1199px) {
  .logo-container img {
    width: 60%;
  }
  .mobile-nav {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  .mobile-nav > li {
    background: var(--cardBg);
    padding: 16px 20px;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    font-size: 1.8rem;
    position: relative;
  }
  .mobile-nav > li::after {
    border-bottom: 1px solid var(--menuHover);
    content: "";
    left: 0rem;
    position: absolute;
    right: 0rem;
    bottom: 0;
    border-radius: 15px;
  }
  .mobile-nav > li a {
    color: var(--textColor);
    text-decoration: none;
  }
  .mobile-nav > li.parent {
    position: relative;
  }
  .mobile-nav > li.parent::before {
    position: absolute;
    right: 10px;
    top: 14px;
    content: "+";
    color: var(--textColor);
    font-size: 18px;
  }
  .mobile-nav > li:hover {
    background: var(--menuHover);
  }
  .child {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: none;
    margin-top: 10px;
    font-size: 1.6rem;
  }
  .child li {
    padding: 8px 15px;
  }
  .child li a {
    color: var(--textColor);
    text-decoration: none;
  }
  .child li:hover {
    background: var(--cardBg);
  }
}
.swiper {
  width: 100%;
}

.heroSwiper {
  /* Center non-active slides vertically */
}
.heroSwiper .swiper-slide:not(.swiper-slide-active) {
  display: flex;
  align-items: center;
}
.heroSwiper .swiper-slide:not(.swiper-slide-active) .hero-slider-content-container {
  height: 85%;
  overflow: hidden;
}

.hero-slider-content-container {
  width: 100%;
  position: relative;
}
.hero-slider-content-container .text-hero-container {
  position: absolute;
  left: 0%;
  bottom: auto;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0px 0px 0px 0px;
  z-index: 10;
}
.hero-slider-content-container .text-hero-container .hero-heading {
  line-height: 120%;
}
.hero-slider-content-container .text-hero-container .hero-heading span {
  background: linear-gradient(135deg, #8B5CF6 0%, #E879F9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 1340px) {
  .hero-slider-content-container .text-hero-container .hero-heading span {
    font-size: 50px;
  }
}
@media (max-width: 1199px) {
  .hero-slider-content-container .text-hero-container .hero-heading span {
    font-size: 44px;
  }
}
@media (max-width: 600.98px) {
  .hero-slider-content-container .text-hero-container .hero-heading span {
    font-size: 26px;
  }
}
.hero-slider-content-container .video-container {
  position: relative;
}
.hero-slider-content-container .video-container video {
  border-radius: 20px;
  -o-object-fit: cover;
     object-fit: cover;
}
.hero-slider-content-container .video-container::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 99%;
  left: 0px;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.441);
  border-radius: 20px;
}

.heroSwiper .swiper-slide {
  height: 800px !important;
}
.heroSwiper .swiper-pagination-bullet-active {
  background-color: var(--primaryColor) !important;
}
.heroSwiper .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  background-color: rgba(255, 255, 255, 0.3764705882) !important;
}

.light-theme .heroSwiper .swiper-pagination-bullet-active {
  background-color: var(--primaryColor) !important;
}
.light-theme .heroSwiper .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  background-color: rgba(0, 0, 0, 0.3764705882) !important;
}

.single-vid-hero .heroSwiper .swiper-wrapper {
  transform: none !important;
}
.single-vid-hero .heroSwiper .swiper-wrapper .swiper-slide {
  width: 100% !important;
}
.single-vid-hero .heroSwiper .swiper-wrapper .video-container {
  position: relative;
}
.single-vid-hero .heroSwiper .swiper-wrapper .video-container video {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0px !important;
}
.single-vid-hero .heroSwiper .swiper-wrapper .video-container::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 99.4%;
  left: 0px;
  top: 0px;
  border-radius: 0px !important;
  background-color: rgba(0, 0, 0, 0.441);
}

.typing-effect-container {
  font-size: 4.2rem;
}
@media (max-width: 1340px) {
  .typing-effect-container {
    flex-flow: column;
  }
}
@media (max-width: 1199px) {
  .typing-effect-container {
    flex-flow: column;
  }
}
@media (max-width: 767.98px) {
  .typing-effect-container {
    flex-flow: wrap;
  }
}
@media (max-width: 600.98px) {
  .typing-effect-container p {
    font-size: 20px;
    margin-top: 16px;
  }
}
.typing-effect-container .typing-effect-text {
  position: relative;
  color: rgba(255, 255, 255, 0);
}
.typing-effect-container .typing-effect-text::before {
  position: absolute;
  content: attr(data-text);
  left: 0px;
  top: -17px;
  color: white;
  animation: typing 1.3s steps(8) infinite;
  white-space: nowrap;
  overflow: hidden;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 8ch;
  }
}
@media (max-width: 767.98px) {
  .heroSwiper .swiper-slide {
    height: 600px !important;
  }
  .video-container video {
    height: 600px !important;
  }
  .hero-slider-content-container .text-hero-container {
    bottom: 10%;
  }
}
@media (max-width: 580px) {
  .heroSwiper .swiper-slide {
    height: 400px !important;
  }
  .hero-slider-content-container .text-hero-container {
    bottom: 25%;
  }
}
/*-----Typing Css---*/
span.typed-text {
  font-weight: normal;
  color: #dd7732;
}

span.cursor {
  display: inline-block;
  background-color: #ccc;
  margin-left: 0.1rem;
  width: 3px;
  animation: blink 1s infinite;
}

span.cursor.typing {
  animation: none;
}

@keyframes blink {
  0% {
    background-color: #ccc;
  }
  49% {
    background-color: #ccc;
  }
  50% {
    background-color: transparent;
  }
  99% {
    background-color: transparent;
  }
  100% {
    background-color: #ccc;
  }
}
.swiper-slide.swiper-slide-active:before {
  opacity: 1;
  transition-delay: 300ms;
}
.swiper-slide.swiper-slide-active img {
  transform: scale(0.9);
  opacity: 1;
}

.swiper-button {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: white;
}
.swiper-button:after {
  font-size: 14px;
  color: black;
}

.swiper-button-prev {
  left: 40px;
}

.swiper-button-next {
  right: 40px;
}

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.stage {
  width: auto;
  height: 100px;
  margin-left: 10px;
}
@media (max-width: 1340px) {
  .stage {
    width: 400px;
    margin: 0 auto;
  }
}
@media (max-width: 1199px) {
  .stage {
    width: 400px;
    margin: 0 auto;
  }
}
@media (max-width: 767.98px) {
  .stage {
    margin-left: 0px;
    width: 360px;
    margin: 0 auto;
  }
}

.cubespinner {
  -webkit-animation-name: spincube;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 8s;
  animation-name: spincube;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 8s;
  transform-style: preserve-3d;
  transform-origin: 40px 40px 0;
}

.cubespinner div {
  position: absolute;
  width: 400px;
  height: 80px;
  text-align: left;
  color: #fff;
  font-weight: 700;
}
@media (max-width: 1340px) {
  .cubespinner div {
    text-align: center;
  }
}
@media (max-width: 1199px) {
  .cubespinner div {
    text-align: center;
  }
}
@media (max-width: 767.98px) {
  .cubespinner div {
    text-align: center;
    font-size: 28px;
    width: 340px;
  }
}

.cubespinner .face1 {
  transform: translateZ(40px);
  -webkit-backface-visibility: hidden;
}

.cubespinner .face2 {
  transform: rotateX(90deg) translateZ(40px);
  -webkit-backface-visibility: hidden;
}

.cubespinner .face3 {
  transform: rotateX(180deg) translateZ(40px);
  -webkit-backface-visibility: hidden;
}

.cubespinner .face4 {
  transform: rotateX(270deg) translateZ(40px);
  -webkit-backface-visibility: hidden;
}

/*Cubical Flipping or rotation*/
@keyframes spincube {
  from, to {
    transform: rotateX(0deg);
  }
  15% {
    transform: rotateX(90deg);
  }
  25% {
    transform: rotateX(90deg);
  }
  40% {
    transform: rotateX(180deg);
  }
  50% {
    transform: rotateX(180deg);
  }
  65% {
    transform: rotateX(270deg);
  }
  75% {
    transform: rotateX(270deg);
  }
  90% {
    transform: rotateX(360deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}
@media (min-width: 2100px) and (max-width: 3600px) {
  .heroSwiper .swiper-wrapper {
    height: 900px !important;
  }
  .video-container {
    height: 900px !important;
    padding-bottom: 0 !important;
  }
}
.partner-sllider img {
  max-width: 200px;
  display: inline-block;
}

.text-teb-content img {
  max-width: 190px;
  display: inline-block;
  opacity: 0.6;
}

.trusted-partner-slider {
  /* Add basic styles for content */
  /* This class will show the content when active */
}
.trusted-partner-slider .text-teb {
  color: rgba(255, 255, 255, 0.6980392157);
  display: inline-flex;
  margin: 0 8px;
}
.trusted-partner-slider .text-teb.active {
  position: relative;
  border-bottom: 1px solid #0166FF;
  color: #fff;
}
.trusted-partner-slider .text-teb.active::before {
  position: absolute;
  content: "";
  bottom: 0px;
  left: 0px;
  border-bottom: 1px solid #0166FF;
  animation: borderWidth 6s forwards;
}
@keyframes borderWidth {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
.trusted-partner-slider .tab-content {
  opacity: 0;
  display: none;
  transition: opacity 1s ease-in-out, visibility 0s 1s; /* Fade in/out animation */
}
.trusted-partner-slider .tab-content.active {
  opacity: 1;
  display: block;
  transition: opacity 1s ease-in-out;
}
.trusted-partner-slider .weblogo_list {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}
.trusted-partner-slider .weblogo_list li {
  display: inline-flex;
  padding: 0 10px;
  flex-flow: column;
  align-self: center;
}
.trusted-partner-slider .weblogo_list li p {
  text-align: center;
  padding-top: 6px;
}

@media screen and (max-width: 991px) {
  .trusted-partner-slider .text-teb.active {
    position: relative;
    border-bottom: none;
  }
  .trusted-partner-slider .text-teb.active::before {
    display: none;
  }
}
.ai-research-single-card {
  border-radius: 20px;
  background: rgba(10, 10, 15, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-sizing: border-box;
}
.ai-research-single-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ai-research-single-card:hover {
  background: rgba(15, 15, 20, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.ai-research-single-card:hover::before {
  opacity: 1;
}
.ai-research-single-card:hover .ai-icon {
  transform: scale(1.1);
}
.ai-research-single-card .ai-icon {
  transition: transform 0.3s ease;
}
.ai-research-single-card a {
  color: #fff;
  text-decoration: none;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ai-research-single-card .tworowblock {
  height: 100%;
}
.ai-research-single-card .tworowblock > div {
  height: 100%;
}
.ai-research-single-card .tworowblock > div > div {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ai-research-single-card .f-18 {
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}
.ai-research-single-card:hover .f-18 {
  color: rgba(255, 255, 255, 1);
}
@media (max-width: 1340px) {
  .ai-research-single-card a img {
    width: 90px;
  }
}

.frontier-ai-subtext {
  width: 75%;
}

.all-gen-ai-links-container {
  border-left: 2px solid var(--borderColor);
  padding-left: 20px;
}

.single-ai-arch {
  opacity: 0.2;
}
.single-ai-arch .description {
  display: none;
}
.single-ai-arch ul {
  display: none;
}

.single-ai-arch.active {
  opacity: 1;
  position: relative;
}
.single-ai-arch.active .description {
  display: block;
}
.single-ai-arch.active ul {
  display: flex;
  flex-flow: column;
  list-style-type: disc;
}
.single-ai-arch.active::before {
  position: absolute;
  content: "";
  height: 100%;
  border-left: 6px solid var(--borderColor);
  border-radius: 10px;
  left: -24px;
}
.single-ai-arch.active::after {
  position: absolute;
  content: "";
  height: 100%;
  border-left: 6px solid var(--primaryColor);
  border-radius: 10px;
  left: -24px;
  top: 0px;
  animation: growBorder 10s forwards;
}

.single-ai-arch.active:not(:first-child) {
  animation: descriptionTransform 1s forwards;
}

@keyframes growBorder {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes descriptionTransform {
  0% {
    transform: translateY(60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@media screen and (max-width: 1199px) {
  .frontier-ai-subtext {
    width: 100%;
  }
}
/* Parallax section with slower background scrolling */
.parallax-main-container {
  position: relative;
  background-image: url(https://skylarklabs.ai/assets/images/future-ai.png);
  background-size: 110%;
  background-attachment: fixed; /* This creates the parallax effect */
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  transition: background-size 2s ease;
}
.parallax-main-container::before {
  position: absolute;
  content: ""; /* Add this to make the overlay visible */
  background-color: rgba(0, 0, 0, 0.533);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.parallax-main-container:hover {
  background-size: 125%;
}

.foreground-content {
  background-color: rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 991px) {
  .parallax-main-container {
    background-position-x: right;
  }
}
.py-70 {
  padding: 70px 0px;
}

.parallax-heading {
  font-size: 5rem;
  width: 70%;
}

.learn-more-our-mission {
  cursor: pointer;
  transform: rotate(0deg);
}
.learn-more-our-mission:hover {
  text-decoration: underline !important;
}
.learn-more-our-mission:hover img {
  transform: rotate(405deg);
  transition: transform 0.5s ease;
}

.mt-40 {
  margin-top: 4rem;
}

@media (max-width: 575.98px) {
  .mt-40 {
    margin-top: 3rem;
  }
}
.ai-benifits-tabs-container .f-40 {
  font-size: 4rem;
}
.ai-benifits-tabs-container .width-60 {
  width: 60%;
}
.ai-benifits-tabs-container .tabs-container {
  margin-top: 5rem;
  position: relative;
}
.ai-benifits-tabs-container .tabs-container::before {
  position: absolute;
  content: "";
  border-bottom: 1px solid var(--borderColor);
  left: 0px;
  bottom: 2px;
  width: 100%;
  z-index: 0;
}
.ai-benifits-tabs-container .tabs-container .single-tab {
  position: relative;
  padding: 0px 4rem;
  padding-bottom: 10px;
  border-bottom: 6px solid var(--borderColor);
  white-space: nowrap;
}
.ai-benifits-tabs-container .tabs-container .single-tab.active {
  border-bottom: 6px solid var(--primaryColor);
}
.ai-benifits-tabs-container .tab-content > div {
  display: none;
}
.ai-benifits-tabs-container .tab-content > div.active {
  display: block;
}
.ai-benifits-tabs-container .tab-vid-container {
  position: relative;
  min-height: 247px;
}
.ai-benifits-tabs-container .tab-vid-container::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9584208683) 0%, rgba(0, 0, 0, 0) 58%);
  border-radius: 20px;
}
.ai-benifits-tabs-container .tab-vid-container video {
  border-radius: 20px;
  -o-object-fit: cover;
     object-fit: cover;
}
.ai-benifits-tabs-container .tab-vid-container .vid-text-container {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  color: #fff !important;
}
.ai-benifits-tabs-container .tab-vid-container .vid-text-container p {
  color: #fff;
}
.ai-benifits-tabs-container .single-focus-card {
  background-color: #0F1A31;
  border-radius: 6px;
}
.ai-benifits-tabs-container .single-focus-card span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #273758;
}

@media screen and (max-width: 1199px) {
  .ai-benifits-tabs-container .width-60 {
    width: 90%;
  }
}
.big-text-120 {
  font-size: 12rem;
  color: var(--bigText);
  font-weight: 600;
}

.right-video-content-container .f-40, .left-video-content-container .f-40 {
  font-size: 4rem;
}

.all-kepler-links-container, .all-turing-links-container {
  border-left: 2px solid var(--borderColor);
  padding-left: 20px;
}

.single-kepler-link, .single-turing-link, .single-platformsthree-link {
  opacity: 0.2;
}
.single-kepler-link .description, .single-turing-link .description, .single-platformsthree-link .description {
  display: none;
}

.single-kepler-link.active, .single-turing-link.active,
.single-platformsthree-link.active {
  opacity: 1;
  position: relative;
}
.single-kepler-link.active .description, .single-turing-link.active .description,
.single-platformsthree-link.active .description {
  display: block;
}
.single-kepler-link.active::before, .single-turing-link.active::before,
.single-platformsthree-link.active::before {
  position: absolute;
  content: "";
  height: 100%;
  border-left: 6px solid var(--borderColor);
  border-radius: 10px;
  left: -24px;
}
.single-kepler-link.active::after, .single-turing-link.active::after,
.single-platformsthree-link.active::after {
  position: absolute;
  content: "";
  height: 100%;
  border-left: 6px solid var(--primaryColor);
  border-radius: 10px;
  left: -24px;
  top: 0px;
  animation: growBorder 10s forwards;
}

.single-kepler-link.active:not(:first-child), .single-turing-link.active:not(:first-child) {
  animation: descriptionTransform 1s forwards;
}

@keyframes growBorder {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes descriptionTransform {
  0% {
    transform: translateY(60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
.kepler-vid-container,
.platformsthree-vid-container {
  position: relative;
  height: 100%;
}
.kepler-vid-container .vid-frame,
.platformsthree-vid-container .vid-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  border-top: 30px solid var(--borderColor);
  border-bottom: 30px solid var(--borderColor);
  border-left: 30px solid var(--borderColor);
  border-radius: 20px;
}

.turing-vid-container {
  position: relative;
  height: 100%;
}
.turing-vid-container .vid-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0px;
  top: 0px;
  border-top: 30px solid var(--borderColor);
  border-bottom: 30px solid var(--borderColor);
  border-right: 30px solid var(--borderColor);
  border-radius: 20px;
}

@media screen and (max-width: 991px) {
  .big-text-120 {
    font-size: 8.5rem;
    color: var(--bigText);
  }
  .kepler-vid-container .vid-frame, .turing-vid-container .vid-frame, .platformsthree-vid-container .vid-frame {
    position: static;
    width: 100%;
    height: 100%;
    margin-top: 4rem;
  }
  .kepler-vid-container .vid-frame video, .turing-vid-container .vid-frame video, .platformsthree-vid-container .vid-frame video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover; /* Ensures video covers the container without distortion */
  }
}
.big-text-120 {
  font-size: 12rem;
  color: var(--bigText);
  font-weight: 600;
}

.right-video-content-container .f-40, .left-video-content-container .f-40 {
  font-size: 4rem;
}

.all-kepler-links-container, .all-turing-links-container, .all-turing-links-container1, .all-turing-links-container2, .all-platformsthree-links-container, .all-platformsthree-links-container1 {
  border-left: 2px solid var(--borderColor);
  padding-left: 20px;
}

.single-kepler-link, .single-turing-link, .single-turing-link1, .single-turing-link2, .single-platformsthree-link1 {
  opacity: 0.2;
}
.single-kepler-link .description, .single-turing-link .description, .single-turing-link1 .description, .single-turing-link2 .description, .single-platformsthree-link1 .description {
  display: none;
}

.single-kepler-link.active, .single-turing-link.active, .single-turing-link1.active, .single-turing-link2.active, .single-platformsthree-link1.active {
  opacity: 1;
  position: relative;
}
.single-kepler-link.active .description, .single-turing-link.active .description, .single-turing-link1.active .description, .single-turing-link2.active .description, .single-platformsthree-link1.active .description {
  display: block;
}
.single-kepler-link.active::before, .single-turing-link.active::before, .single-turing-link1.active::before, .single-turing-link2.active::before, .single-platformsthree-link1.active::before {
  position: absolute;
  content: "";
  height: 100%;
  border-left: 6px solid var(--borderColor);
  border-radius: 10px;
  left: -24px;
}
.single-kepler-link.active::after, .single-turing-link.active::after, .single-turing-link1.active::after, .single-turing-link2.active::after, .single-platformsthree-link1.active::after {
  position: absolute;
  content: "";
  height: 100%;
  border-left: 6px solid var(--primaryColor);
  border-radius: 10px;
  left: -24px;
  top: 0px;
  animation: growBorder 10s forwards;
}

.single-kepler-link.active:not(:first-child),
.single-turing-link.active:not(:first-child),
.single-turing-link1.active:not(:first-child),
.single-turing-link2.active:not(:first-child),
.single-platformsthree-link1.active:not(:first-child) {
  animation: descriptionTransform 1s forwards;
}

@keyframes growBorder {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes descriptionTransform {
  0% {
    transform: translateY(60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
.kepler-vid-container,
.safetycompliance-vid-container,
.platformsthree-vid-container,
.inventory-vid-container,
.platformsthree-vid-container1 {
  position: relative;
  height: 100%;
}
.kepler-vid-container .vid-frame,
.safetycompliance-vid-container .vid-frame,
.platformsthree-vid-container .vid-frame,
.inventory-vid-container .vid-frame,
.platformsthree-vid-container1 .vid-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  border-top: 10px solid var(--borderColor);
  border-bottom: 10px solid var(--borderColor);
  border-left: 10px solid var(--borderColor);
  border-radius: 10px;
}
.kepler-vid-container .vid-frame video,
.safetycompliance-vid-container .vid-frame video,
.platformsthree-vid-container .vid-frame video,
.inventory-vid-container .vid-frame video,
.platformsthree-vid-container1 .vid-frame video {
  border-radius: 10px;
}
.kepler-vid-container .vid-frame video,
.safetycompliance-vid-container .vid-frame video,
.platformsthree-vid-container .vid-frame video,
.inventory-vid-container .vid-frame video,
.platformsthree-vid-container1 .vid-frame video {
  -o-object-fit: cover;
     object-fit: cover;
}

.turing-vid-container,
.turing-vid-container1,
.turing-vid-container2,
.inventory-vid-container {
  position: relative;
  height: 100%;
}
.turing-vid-container .vid-frame,
.turing-vid-container1 .vid-frame,
.turing-vid-container2 .vid-frame,
.inventory-vid-container .vid-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0px;
  border-top: 10px solid var(--borderColor);
  border-bottom: 10px solid var(--borderColor);
  border-right: 10px solid var(--borderColor);
  border-radius: 10px;
}
.turing-vid-container .vid-frame video,
.turing-vid-container1 .vid-frame video,
.turing-vid-container2 .vid-frame video,
.inventory-vid-container .vid-frame video {
  border-radius: 10px;
}
.turing-vid-container .vid-frame video,
.turing-vid-container1 .vid-frame video,
.turing-vid-container2 .vid-frame video,
.inventory-vid-container .vid-frame video {
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 991px) {
  .big-text-120 {
    font-size: 8.5rem;
    color: var(--bigText);
  }
  .kepler-vid-container .vid-frame, .turing-vid-container .vid-frame,
  .turing-vid-container2 .vid-frame, .turing-vid-container1 .vid-frame,
  .platformsthree-vid-container1 .vid-frame,
  .inventory-vid-container .vid-frame,
  .platformsthree-vid-container .vid-frame {
    position: static;
    width: 100%;
    height: 100%;
    margin-top: 4rem;
  }
  .kepler-vid-container .vid-frame video, .turing-vid-container .vid-frame video,
  .turing-vid-container2 .vid-frame video, .turing-vid-container1 .vid-frame video,
  .platformsthree-vid-container1 .vid-frame video,
  .inventory-vid-container .vid-frame video,
  .platformsthree-vid-container .vid-frame video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover; /* Ensures video covers the container without distortion */
  }
}
@media screen and (max-width: 640px) {
  .topnone {
    padding-bottom: 20px;
  }
  .topnone .vid-frame {
    margin-top: 0px !important;
  }
}
.industries-container .f-40 {
  font-size: 4rem;
}
.industries-container .sub-head-text {
  width: 50%;
}

.single-card-container {
  background-color: var(--cardBg);
  transition: background-color 0.8s;
}
.single-card-container .img-container img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.single-card-container .learn-more-text {
  color: var(--primaryColor);
}
.single-card-container:hover {
  background-color: var(--primaryColor);
  color: white;
}
.single-card-container:hover .learn-more-text {
  color: white;
}

@media screen and (max-width: 991px) {
  .industries-container .sub-head-text {
    width: 100%;
  }
}
/* Mobile styles */
@media screen and (max-width: 767px) {
  .blogmaiinpage img {
    height: 360px !important;
  }
  .topbanner_blog {
    min-height: 360px;
    height: 360px;
  }
  .topbanner_blog .productpage_caption {
    padding-top: 110px;
    height: 100%;
    top: 0;
  }
  .productpage_caption {
    padding: 15px;
  }
  .bannercaptions h1 {
    font-size: 22px;
    margin-bottom: 10px;
  }
  .bannercaptions p {
    font-size: 14px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .bannercaptions {
    max-width: 100%;
    padding: 0 10px;
  }
  .productpage_banner img {
    height: 300px;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }
}
/* Tablet styles */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .productpage_banner {
    min-height: 400px;
  }
  .bannercaptions h1 {
    font-size: 28px;
  }
  .bannercaptions p {
    font-size: 16px;
  }
  .productpage_banner img {
    height: 700px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
/* Mobile-first approach */
@media only screen and (max-width: 767px) {
  /* Text adjustments */
  h1 {
    font-size: 24px !important;
    line-height: 1.3;
  }
  h2 {
    font-size: 22px !important;
  }
  h3 {
    font-size: 20px !important;
  }
  .f-18, p.f-18 {
    font-size: 16px !important;
  }
  .f-16, p.f-16 {
    font-size: 14px !important;
  }
  /* Spacing adjustments */
  .mt-40 {
    margin-top: 20px !important;
  }
  .p-4, .p-5 {
    padding: 15px !important;
  }
  /* Banner and image adjustments */
  .productpage_banner img {
    width: 100%;
    height: auto;
  }
  /* Team section adjustments */
  .teamexecutive {
    margin-bottom: 20px;
  }
  .card_image-wrapper img {
    width: 100%;
    height: auto;
  }
  /* Tab adjustments */
  .skylarkstarted .nav-link {
    padding: 8px !important;
    font-size: 14px;
    white-space: normal;
    text-align: center;
    width: 100%;
  }
  .nav-pills {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  /* Modal adjustments */
  .modal-dialog {
    margin: 10px;
  }
  .modal-body {
    padding: 15px;
  }
  /* Grid adjustments */
  .row.gy-5 > [class*=col-] {
    margin-bottom: 20px;
  }
}
/* Tablet adjustments */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .container {
    padding: 0 20px;
  }
  h1 {
    font-size: 28px !important;
  }
  h2 {
    font-size: 24px !important;
  }
  .skylarkstarted .nav-link {
    padding: 10px !important;
    font-size: 15px;
  }
}
/* General responsiveness */
img {
  max-width: 100%;
  height: auto;
}

.table-responsive {
  overflow-x: auto;
}

/* Mobile styles */
@media screen and (max-width: 767px) {
  .skylarkstarted ul li button.nav-link.active {
    width: 100%; /* Reduced width for mobile */
    transform: none !important; /* Disable transform effects */
    transition: none !important; /* Disable transitions */
    padding: 10px 10px !important; /* Adjust padding */
    font-size: 14px; /* Smaller font size */
    border-radius: 50px; /* Slightly reduced border radius */
  }
  .skylarkstarted ul {
    border-radius: 10%;
  }
  .nav-pills {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
  }
  .skylarkstarted ul li button.nav-link.active:hover,
  .skylarkstarted ul li button.nav-link.active:focus {
    width: 100%; /* Keep same width on hover */
    transform: none !important; /* Ensure no transform on hover */
    box-shadow: none !important; /* Remove any shadow effects */
    padding: 23px, 23px;
  }
}
/* Blog Grid Styles */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 20px 0;
}

.blog-card {
  background: rgba(10, 10, 15, 0.6);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  position: relative;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  background: rgba(15, 15, 20, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

.blog-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.blog-card:hover::before {
  opacity: 1;
}

.blog-image {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.image-overlay {
  width: 100%;
  height: 100%;
}

.image-overlay img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
  border-radius: 12px;
}

.blog-card:hover .image-overlay img {
  transform: scale(1.05);
}

.blog-content {
  padding: 20px;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 1.4rem;
  color: #888;
}

.blog-category {
  background: linear-gradient(135deg, #8B5CF6 0%, #E879F9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 4px 0px;
  border-radius: 20px;
  font-size: 1.5rem;
  font-weight: 500;
}

.blog-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.4;
  color: #ffffff !important;
  height: 4.5em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.blog-excerpt {
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.read-more {
  color: #8B5CF6;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.5rem;
  transition: color 0.3s ease;
}

.read-more:hover {
  color: #d8b4fe;
}

/* Override for Anduril-style buttons */
.read-more.anduril-style,
.read-more.anduril-style:hover {
  color: #fff;
}

.readmore-usecase{
  margin-top: auto;
  padding: 0 0 20px 20px;
}

/* Anduril-style Read More Button - Exact Match */
.read-more.anduril-style {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  padding: 0;
  border: none;
  background: transparent;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.read-more.anduril-style::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.read-more.anduril-style .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.9em;
  line-height: 1;
  margin-left: 6px;
  position: relative;
  transform: translateX(0);
  will-change: transform;
  backface-visibility: hidden;
  font-size: 16px;
}

.read-more.anduril-style:hover {
  color: #fff;
}

.read-more.anduril-style:hover::after {
  width: 100%;
}

.read-more.anduril-style:hover .arrow {
  transform: translateX(8px) !important;
  background: rgba(255, 255, 255, 0.2);
}

/* Apply Anduril style to news-link buttons as well */
.news-link.anduril-style {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  padding: 0;
  border: none;
  background: transparent;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.news-link.anduril-style::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-link.anduril-style .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.9em;
  line-height: 1;
  margin-left: 6px;
  position: relative;
  transform: translateX(0);
  will-change: transform;
  backface-visibility: hidden;
  font-size: 16px;
}

.news-link.anduril-style:hover {
  color: #fff;
  background: transparent;
  border: none;
}

.news-link.anduril-style:hover::after {
  width: 100%;
}

.news-link.anduril-style:hover .arrow {
  transform: translateX(8px) !important;
  background: rgba(255, 255, 255, 0.2);
}

/* Apply Anduril style to btndef buttons as well */
.btndef.anduril-style,
.btndef.read-more.anduril-style {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff !important;
  text-decoration: none;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  padding: 0;
  border: none !important;
  background: transparent !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.btndef.anduril-style::after,
.btndef.read-more.anduril-style::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btndef.anduril-style .arrow,
.btndef.read-more.anduril-style .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.9em;
  line-height: 1;
  margin-left: 6px;
  position: relative;
  transform: translateX(0);
  will-change: transform;
  backface-visibility: hidden;
  font-size: 16px;
}

.btndef.anduril-style:hover,
.btndef.read-more.anduril-style:hover {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
}

.btndef.anduril-style:hover::after,
.btndef.read-more.anduril-style:hover::after {
  width: 100%;
}

.btndef.anduril-style:hover .arrow,
.btndef.read-more.anduril-style:hover .arrow {
  transform: translateX(8px) !important;
  background: rgba(255, 255, 255, 0.2);
}

/* Filter Styles */
.filters {
  padding: 40px 0;
  background: #0a0a0a;
}

.filter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.category-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-btn {
  background: transparent;
  border: 1px solid #333;
  color: #ccc;
  padding: 8px 16px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.5rem;
}

.filter-btn:hover,
.filter-btn.active {
  background: linear-gradient(135deg, #0a0812, #8B5CF6, #E879F9);
  border-color: transparent;
  color: white;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box input {
  background: #1a1a1a;
  border: 1px solid #333;
  color: #fff;
  padding: 10px 40px 10px 15px;
  border-radius: 25px;
  width: 250px;
  font-size: 1.5rem;
}

.search-box input::-moz-placeholder {
  color: #666;
}

.search-box input::placeholder {
  color: #666;
}

.search-icon {
  position: absolute;
  right: 15px;
  color: #666;
  font-size: 1rem;
}

/* Responsive grid */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .filter-container {
    flex-direction: column;
    align-items: stretch;
  }
  .search-box input {
    width: 100%;
  }
}
.single-blog-card {
  background-color: #1c1e20;
  border-radius: 20px;
}
.single-blog-card .img-container {
  width: 100%;
  position: relative;
}
.single-blog-card .img-container img {
  width: 100%;
  border-radius: 10px;
}
.single-blog-card .img-container .img-tag {
  position: absolute;
  left: 20px;
  top: 20px;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px 20px;
  border-radius: 20px;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.single-blog-card p a {
  color: #fff;
  text-decoration: none;
}

.footer-container {
  background-color: #17243E;
  color: white;
}
.footer-container ul li {
  padding: 10px;
}
.footer-container ul li a {
  opacity: 0.5;
}
.footer-container ul li a:hover {
  opacity: 1;
}

@media screen and (max-width: 575.99px) {
  .footer-container ul li {
    padding: 10px 30px;
  }
}
:root {
  --primaryColor: #8B5CF6;
  --cardBg: #0a0a0f;
  --textColor: #FFFFFF;
  --bg: #050507;
  --cardHover: #0f0f1c;
  --menuHover: #FFFFFF1A;
  --borderColor: rgba(139, 92, 246, 0.25);
  --themeBorder: rgba(139, 92, 246, 0.15);
  --bigText: #FFFFFF1A;
  --btnGradient: linear-gradient(135deg, #1a1025, #2d1f3d, #3d2952);
  --fontHeading: 'Inter', sans-serif;
  --fontBody: 'Inter', sans-serif;
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--textColor);
  font-size: 1.4rem;
  font-family: var(--fontBody);
}

/* Clean heading typography */
h1, h2, h3, .hero-title, .section_title {
  font-family: var(--fontHeading);
  font-weight: 600;
  letter-spacing: -0.02em;
}

h4, h5, h6 {
  font-family: var(--fontBody);
  font-weight: 500;
}

/* UI elements typography */
.btndef, .btn, button, .nav-link, .menu-container {
  font-family: var(--fontBody);
}

p, .card-text, .description {
  font-family: var(--fontBody);
  font-weight: 400;
}

body.light-theme {
  --cardBg: rgb(237, 237, 237);
  --textColor: #000000;
  --bg: white;
  --cardHover: #E3E6EB33;
  --menuHover: #FFFFFF1A;
  --themeBorder: rgba(0, 0, 0, 0.063);
  --borderColor: #eaeaea66;
  --bigText: #0E0F111A;
}

@font-face {
  font-family: "avenir";
  src: url(https://skylarklabs.ai/assets/fonts/AvenirLTStd-Light.otf);
}
h1 {
  font-size: 7rem;
}

h2 {
  font-size: 5rem;
}

h3 {
  font-size: 3.3rem;
}

h4 {
  font-size: 2.6rem;
}

.f-12 {
  font-size: 1.2rem;
}

.f-14 {
  font-size: 1.4rem;
}

.f-16 {
  font-size: 1.6rem;
}

.f-18 {
  font-size: 1.8rem;
}

.f-20 {
  font-size: 2rem;
}

.f-24 {
  font-size: 2.4rem;
}

.mt-100 {
  margin-top: 10rem;
}

.mt-150 {
  margin-top: 15rem;
}

.my-100 {
  margin: 10rem 0rem;
}

.opacity-70 {
  opacity: 0.7 !important;
}

.btn-primary {
  background: linear-gradient(135deg, #1a1025 0%, #2d1f3d 30%, #4a2963 60%, #6b3fa0 100%);
  background-size: 200% 200%;
  padding: 1.2rem 3rem;
  font-size: 1.6rem;
  font-weight: 500;
  color: white;
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 10px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: btnGradientShift 4s ease-in-out infinite, btnGlow 3s ease-in-out infinite;
}

@keyframes btnGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #2d1f3d 0%, #4a2963 30%, #6b3fa0 60%, #8B5CF6 100%);
  border-color: rgba(139, 92, 246, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
}

.btn-primary:hover::before {
  left: 100%;
}

@keyframes btnGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(139, 92, 246, 0.1); }
  50% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.25); }
}

img {
  max-width: 100%;
}

/*----Raj Css---*/
/*----Product Page css*/
.advancedvisibility {
  padding: 80px 0;
}
.advancedvisibility img.border-radius {
  border-radius: 10px;
}

.productlisting ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.productlisting ul li {
  display: flex;
  align-items: center;
}

.productlisting ul li span {
  display: inline-block;
  margin-right: 10px;
  position: relative;
  top: -2px;
}

.productlisting ul li span img {
  width: 18px;
}

.specifications {
  background-color: #18191B;
}

.productpage_banner {
  position: relative;
}
.productpage_banner .productpage_caption {
  position: absolute;
  left: 0;
  bottom: 20%;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 1;
}
/* Scrim over the banner video. Derivation kept; its dependent is now gone. ----
   This carried a hard "DO NOT DROP BELOW 0.65" guardrail while 14 root pages put
   a breadcrumb trail inside it. Root breadcrumbs were removed on 31 Jul 2026, so
   NOTHING now derives a contrast guarantee from this alpha. The rule is left
   stated rather than deleted, because the derivation is the expensive part and
   re-deriving it is what a future change would skip.

   What still sits on this scrim is the h1 and the subtitle -- large near-white
   text, which clears AA with far more headroom than the figures below. Those
   figures are for #D0D0CB, the crumb-link grey, and apply only if an over-media
   breadcrumb ever returns here:

       0.60    rgb(102,102,102)   3.71:1   FAIL
       0.6496  rgb( 89, 89, 89)   4.50:1   break-even for #D0D0CB
       0.6706  rgb( 84, 84, 84)   4.89:1   current
       0.75    rgb( 64, 64, 64)   6.70:1

   Frame sampling of the Ai-Tower loop showed saturated white genuinely occurs
   behind that region, so 4.89:1 was the floor the footage actually reached, not
   a theoretical worst case. The matching assertion was removed from
   check-contrast.py rather than left passing with zero dependents -- a green
   check that guards nothing reads as coverage and is not. */
.productpage_banner .productpage_caption .bannercaptions {
  background-color: rgba(0, 0, 0, 0.6705882353);
  padding: 25px;
  border-radius: 10px;
  max-width: 70%;
}
.productpage_banner .productpage_caption .bannercaptions h1 {
  background: linear-gradient(135deg, #8B5CF6 0%, #E879F9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (max-width: 1360px) {
  .productpage_banner .productpage_caption .bannercaptions {
    max-width: 90%;
  }
}
@media (max-width: 1199px) {
  .productpage_banner .productpage_caption .bannercaptions h1 {
    font-size: 46px;
  }
}
@media (max-width: 767.98px) {
  .productpage_banner .productpage_caption .bannercaptions {
    max-width: 100%;
  }
}
.productpage_banner .productpage_caption .bannercaptions .bannertages {
  display: flex;
  flex-flow: wrap;
  padding-top: 20px;
}
.productpage_banner .productpage_caption .bannercaptions .bannertages a {
  font-size: 16px;
  color: #fff;
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 4px;
  margin-right: 12px;
  margin-bottom: 12px;
  text-decoration: none;
  background: rgba(113, 77, 255, 0.16) !important;
  border: 1px solid rgba(225, 81, 255, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 6px 16px rgba(113, 77, 255, 0.18);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.productpage_banner .productpage_caption .bannercaptions .bannertages a:hover {
  background: rgba(225, 81, 255, 0.22) !important;
  border-color: rgba(255, 247, 89, 0.55) !important;
}

@media (max-width: 767.98px) {
  .productpage_banner video {
    height: 600px !important;
  }
  .productpage_banner .productpage_caption {
    bottom: 16%;
  }
  .productpage_banner .productpage_caption .bannercaptions .bannertages a {
    font-size: 12px;
    margin-bottom: 0;
  }
  .aboutbanner {
    height: 500px !important;
  }
  .newsbanner img {
    height: 450px;
  }
}
.productpage_banner {
  position: relative;
}
.productpage_banner::before {
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9220063025) 0%, rgba(0, 0, 0, 0) 56%);
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  content: "";
  z-index: 1;
}

.blockbg {
  background-color: var(--cardBg);
  padding: 80px  0;
  
}
/* .blockbg .container {
  padding-top: 0 !important;
  width: 100%;
  display: flex;
  align-items: center;
} */
.blockbg .logosliderblock {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100px;
  padding: 0;
}
.blockbg .logo-slider-block {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  width: 100% !important;
  min-height: 100px;
  margin: 0;
  padding: 0;
}
.blockbg .logo-slider-block .swiper {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  margin: 0;
  padding: 0;
}
.blockbg .logo-slider-block .swiper-wrapper {
  display: flex !important;
  align-items: center !important;
  -webkit-box-align: center !important;
  align-content: center !important;
  height: 100% !important;
  margin: 0;
  padding: 0;
}
.blockbg .logo-slider-block .swiper-slide {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  line-height: 0;
  align-self: center !important;
  margin: 0;
  padding: 0;
}
.blockbg .logo-slider-block .swiper-slide img {
  vertical-align: middle !important;
  margin: auto !important;
  display: block !important;
  max-height: 60px !important;
  height: 60px !important;
  width: auto !important;
  object-fit: contain !important;
}
.blockbg h3 span {
  background: linear-gradient(135deg, #8B5CF6 0%, #E879F9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heroSwiper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.heroSwiper + .blockbg {
  margin-top: 0px !important;
  padding: 60px 0 60px 0 !important;
}

.heroSwiper .swiper-pagination {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  position: absolute !important;
  bottom: 30px !important;
  z-index: 10;
}

@media (max-width: 1400px) {
  .heroSwiper + .blockbg {
    margin-top: 0px !important;
    padding: 60px 0 60px 0 !important;
  }
}

@media (max-width: 1300px) {
  .heroSwiper + .blockbg {
    margin-top: 0px !important;
    padding: 60px 0 60px 0 !important;
  }
}

@media (max-width: 1200px) {
  .heroSwiper + .blockbg {
    margin-top: 0px !important;
    padding: 60px 0 60px 0 !important;
  }
}

.blockbgtwo {
  padding: 80px 0;
}
.blockbgtwo h3 span {
  background: linear-gradient(135deg, #8B5CF6 0%, #E879F9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.advancedvisibility_item {
  display: flex;
  position: relative;
  height: 100%;
  border-radius: 10px;
}
.advancedvisibility_item img.border-radius {
  border-radius: 10px;
}
.advancedvisibility_item a {
  display: flex;
  position: relative;
  border-radius: 10px;
  width: 100%;
}
.advancedvisibility_item a::before {
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9220063025) 0%, rgba(0, 0, 0, 0) 56%);
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  content: "";
  z-index: 1;
}
.advancedvisibility_item a video {
  border-radius: 20px;
}
.advancedvisibility_item a .landsystem_dis {
  position: absolute;
  bottom: 0;
  padding: 50px;
  width: 100%;
  left: 0;
  z-index: 2;
  display: flex;
}
.advancedvisibility_item a .landsystem_dis p {
  color: #fff;
  font-size: 22px;
}
.advancedvisibility_item a .landsystem_dis img {
  max-width: 40px;
}

.landsystem {
  display: flex;
  position: relative;
  max-height: 720px;
  height: 100%;
  border-radius: 10px;
}
.landsystem a {
  display: flex;
  height: 600px;
  position: relative;
  border-radius: 10px;
  transition: opacity 1s ease 0.3s, transform 0.6s ease 0.3s, visibility 0s linear 0.3s;
  transform: translate3d(0, -15px, 0);
  transition: all 150ms linear;
}
.landsystem a::before {
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9220063025) 0%, rgba(0, 0, 0, 0) 56%);
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  content: "";
  z-index: 1;
  border-radius: 0 0 10px 10px;
}
.landsystem a video {
  border-radius: 20px;
}
.landsystem a .landsystem_dis {
  position: absolute;
  bottom: 0;
  padding: 50px;
  width: 100%;
  left: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.4588235294);
  border-radius: 20px 20px 10px 10px;
  transition: opacity 1s ease 0.3s, transform 0.6s ease 0.3s, visibility 0s linear 0.3s;
}
.landsystem a .landsystem_dis p {
  color: #fff;
  font-size: 22px;
}
.landsystem a .landsystem_dis .f-16 {
  font-size: 1.6rem;
  opacity: 0;
  transform: translate3d(0, -15px, 0);
  transition: all 150ms linear;
  visibility: hidden;
  animation: FadeOut 1s ease-in-out;
}
.landsystem a .landsystem_dis img {
  max-width: 40px;
}
.landsystem a:hover .f-16 {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  animation: FadeIn 1s ease-in-out;
}

.keplerindustry a {
  max-height: 560px;
  height: 420px;
}
.keplerindustry a .landsystem_dis {
  background: transparent;
}

@media (max-width: 1299.98px) {
  .landsystem a .landsystem_dis {
    padding: 20px;
  }
  .landsystem a .landsystem_dis p {
    font-size: 17px;
  }
  .landsystem a .landsystem_dis img {
    max-width: 32px;
  }
}
@media screen and (max-width: 1199px) {
  .bookdemomobile {
    background-color: #262626;
    padding: 10px 15px;
    border-radius: 0 0 10px 10px;
  }
  .bookdemomobile a {
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
    text-decoration: none;
  }
  .btn-container .btn-primary {
    display: none;
  }
  html {
    font-size: 55.5%;
  }
  .btn-primary {
    padding: 1rem 2rem;
  }
  .advancedvisibility {
    padding: 40px 0;
  }
  .landsystem {
    max-height: 520px;
  }
  .landsystem a {
    height: 500px;
  }
  .landsystem a .landsystem_dis {
    padding: 20px;
  }
  .landsystem a .landsystem_dis p {
    font-size: 22px;
  }
  .landsystem a .landsystem_dis img {
    max-width: 32px;
  }
}
@media (max-width: 991.98px) {
  html {
    font-size: 55.5%;
  }
  .btn-primary {
    padding: 1rem 2rem;
  }
  .advancedvisibility_item a .landsystem_dis {
    padding: 20px;
    padding-bottom: 0;
  }
  .advancedvisibility_item a .landsystem_dis p {
    font-size: 18px;
  }
  .advancedvisibility_item a .landsystem_dis img {
    max-width: 32px;
  }
}
@media (max-width: 767.98px) {
  .mt-100 {
    margin-top: 5rem;
  }
  h1 {
    font-size: 6rem;
  }
  h2 {
    font-size: 4rem;
  }
  h3 {
    font-size: 3rem;
  }
  h4 {
    font-size: 2.4rem;
  }
}
@media (max-width: 575.98px) {
  html {
    font-size: 55.5%;
  }
  .btn-primary {
    padding: 1rem 2rem;
  }
  h1 {
    font-size: 5rem;
  }
  h2 {
    font-size: 4rem;
  }
  h3 {
    font-size: 3rem;
  }
  h4 {
    font-size: 2.4rem;
  }
  .landsystem {
    max-height: 520px;
  }
  .landsystem a {
    height: 500px;
  }
  .landsystem a .landsystem_dis {
    padding: 20px;
  }
  .landsystem a .landsystem_dis p {
    font-size: 22px;
  }
  .landsystem a .landsystem_dis img {
    max-width: 32px;
  }
  .advancedvisibility {
    padding: 30px 0;
  }
  .advancedvisibility_item a .landsystem_dis {
    padding: 20px;
    padding-bottom: 0;
  }
  .advancedvisibility_item a .landsystem_dis p {
    font-size: 22px;
  }
  .advancedvisibility_item a .landsystem_dis img {
    max-width: 32px;
  }
}
.pointsblock li {
  display: flex;
}
.pointsblock li picture {
  background-color: hsla(0, 0%, 100%, 0.09);
  border-width: 1px;
  border-color: hsla(0, 0%, 100%, 0.1);
  border-radius: 9999px;
  justify-content: center;
  width: 18px;
  height: 18px;
  display: flex;
  margin-right: 10px;
}
.pointsblock li picture img {
  max-width: 10px;
}

.outpoints {
  background-color: hsla(0, 0%, 100%, 0.09);
  border-width: 1px;
  border-color: hsla(0, 0%, 100%, 0.1);
  border-width: 1px;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  display: flex;
  width: 44px;
  height: 44px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-color: rgba(147, 51, 234, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.changebox {
  margin: 0 5px;
  color: #fff;
  overflow: hidden;
  transition: 0.5s;
  white-space: nowrap;
  text-align: left;
  line-height: normal;
  max-height: 32px !important;
  height: 32px !important;
}
.changebox span {
  line-height: inherit !important;
  white-space: nowrap;
  font-size: 32px !important;
  line-height: normal;
}

/*----career page*/
.opening {
  position: relative;
  background: rgba(134, 191, 242, 0.01);
  border-radius: 16px;
  overflow: hidden;
  border: 0 solid #e5e7eb;
}
.opening ::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 16px;
}
.opening a {
  color: #fff;
  text-decoration: none;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  background-color: rgba(255, 255, 255, 0.0901960784);
  transition-duration: 0.15s;
  position: relative;
  border: none;
}
.opening a:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.0274509804);
}
.opening a:nth-child(odd)::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.1568627451);
  transition: width 0.3s;
  position: absolute;
  bottom: 0;
  z-index: 2;
}
.opening a:nth-child(odd):hover::after {
  width: 100%;
}
.opening a:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.0470588235);
}
.opening a:nth-child(even)::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.1568627451);
  transition: width 0.3s;
  position: absolute;
  bottom: 0;
  z-index: 2;
}
.opening a:nth-child(even):hover::after {
  width: 100%;
}
.opening .grid {
  display: grid;
}
.opening .grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*----Aboutuspage---*/
.skylarkstarted ul {
  border-radius: 100px;
  border: 1px solid hsla(0, 0%, 100%, 0.15);
  position: relative;
  display: flex;
  padding: 4px;
}
@media (max-width: 640px) {
  .skylarkstarted ul {
    border: none;
  }
}
.skylarkstarted ul li button.nav-link {
  color: #fff;
  opacity: 0.5;
  padding: 8px 20px !important;
  width: 100%;
  font-size: 18px;
}
@media (max-width: 991px) {
  .skylarkstarted ul li button.nav-link {
    font-size: 14px;
  }
}
@media (max-width: 780px) {
  .skylarkstarted ul li button.nav-link {
    padding: 8px 14px !important;
    font-size: 12px;
  }
}
@media (max-width: 640px) {
  .skylarkstarted ul li button.nav-link {
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.1843137255);
    font-size: 13px;
  }
}
.skylarkstarted ul li button.nav-link.active {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1215686275);
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1843137255);
}

.profiletabs {
  border-radius: 16px;
  position: relative;
  box-sizing: border-box;
  z-index: 1;
  background: hsla(0, 0%, 100%, 0.01);
  border: 1px solid hsla(0, 0%, 100%, 0.06);
}

.teamexecutive a {
  color: #fff;
  text-decoration: none;
  position: relative;
}
.teamexecutive a .card_image-wrapper {
  overflow: hidden;
}
.teamexecutive a .card_image-wrapper .leadership-image {
  border: 1px solid rgba(0, 0, 0, 0.1490196078);
  margin-bottom: 15px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
}
.teamexecutive a .team_sublarg h5 {
  font-weight: 500;
}
.teamexecutive a span.country_icon {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
}
.teamexecutive a span.country_icon img {
  max-width: 30px;
}

.modalbox {
  background-color: #18191B;
}
.modalbox .modal-header {
  border-color: rgba(255, 255, 255, 0.0470588235);
}
.modalbox .modal-header .btn-close {
  background-color: #fff;
  border-radius: 50%;
  margin-right: 10px;
  padding: 8px;
}
.modalbox .linkdinprofile {
  position: absolute;
  left: 28px;
  top: 3px;
  width: 40px;
  height: 40px;
}

.btndef {
  color: #262626;
  border: 1px solid #fff;
  background: #fff;
  font-weight: 500;
  line-height: 20px;
  position: relative;
  z-index: 1;
  text-align: center;
  border-radius: 10px;
  padding: 8px 17px;
  text-decoration: none;
}

.newandmedia {
  gap: 30px;
}
.newandmedia .newsitem {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  top: auto;
  left: auto;
  flex-shrink: 0;
  background: rgba(12, 12, 12, 0.7019607843);
  overflow: hidden;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid rgba(65, 65, 65, 0.4196078431);
  padding: 24px;
  height: 100%;
  min-height: 400px;
}
.newandmedia .newsitem .categoryname {
  margin-bottom: 10px;
  color: #fff;
}
.newandmedia .newsitem .categoryname a {
  background: linear-gradient(119deg, #BC8BC5 49%, rgb(224, 80, 255) 197%) 0% 0%/100% 100% no-repeat padding-box;
  background-clip: text;
  -webkit-background-clip: text;
  text-transform: uppercase;
  color: transparent;
  display: inline-flex;
  margin-right: 8px;
}
.newandmedia .newsitem h3 {
  max-height: 90px;
  overflow: hidden;
  font-size: 3rem;
  -webkit-box-orient: vertical;
  display: block;
  display: -webkit-box;
  font-family: sans-serif;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  height: 100%;
}
.newandmedia .newsitem .newsdate {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1607843137);
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  border-radius: 40px;
  padding: 5px 20px;
  color: rgba(255, 255, 255, 0.4509803922);
}
.newandmedia .newsitem .blogitemfooter {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  margin-top: auto;
}
.newandmedia .newsitem .readmorebtns {
  margin-top: auto;
}
.newandmedia .newsitem .newspaper {
  display: flex;
  -o-object-fit: cover;
     object-fit: cover;
  max-height: 120px;
  overflow: hidden;
}
.newandmedia .newsitem .newspaper img {
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: auto;
  border-radius: 6px;
}
.newandmedia .newsitem .newspaper_auto {
  max-height: inherit;
  max-height: 397px;
  overflow: hidden;
  border-radius: 6px;
  height: 100%;
}
.newandmedia .newsitem .readmore_btn {
  background-color: transparent;
  color: #fff;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
  border-bottom: 0.5px solid #fff;
  padding-bottom: 3px;
}
.newandmedia .newstitlemain {
  display: flex;
  justify-content: space-between;
}
.newandmedia .viewall {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1607843137);
  padding: 5px 20px;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  border-radius: 50px;
  color: #fff;
  align-items: center;
}
.newandmedia .viewall span {
  display: inline-flex;
  margin-left: 8px;
}
.newandmedia .viewall:hover {
  box-shadow: inset 0 0 0 1px #fff;
}

#js-next1 {
  right: 5px !important;
}

#js-prev1,
#js-next1 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0E0F11;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1607843137);
  z-index: 3333;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 22px !important;
  color: #fff !important;
}

.traditionalsoftware ul {
  list-style-type: none;
  margin: 0;
  padding: 6px;
  display: flex;
  border: 1px solid hsla(0, 0%, 100%, 0.15);
  border-radius: 40px;
}
.traditionalsoftware ul li {
  display: inline-flex;
  position: relative;
  padding: 0 20px;
}
.traditionalsoftware ul li::before {
  content: "";
  width: 1px;
  height: 30px;
  position: absolute;
  right: 0;
  top: 6px;
  background-color: var(--themeBorder);
}
.traditionalsoftware ul li:last-child::before {
  display: none;
}
.traditionalsoftware ul li a {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--themeBorder);
  border-color: transparent;
  transition: ease-out 0.5s;
  -webkit-transition: ease-out 0.5s;
  -moz-transition: ease-out 0.5s;
  border-radius: 20px;
}
.traditionalsoftware ul li a span {
  display: inline-flex;
  margin-right: 10px;
}
.traditionalsoftware ul li a span img {
  max-width: 26px;
}
.traditionalsoftware ul li a:hover {
  background-color: var(--cardBg);
  border: 1px solid var(--themeBorder);
}
.traditionalsoftware ul li:first-child {
  padding-left: 0;
}
.traditionalsoftware ul li:first-child a {
  background-color: var(--cardBg);
  border: 1px solid var(--themeBorder);
}

.yearsoftware_dis {
  position: relative;
  height: 100%;
}
.yearsoftware_dis .row {
  position: relative;
  z-index: 9;
}
.yearsoftware_dis::before {
  content: "";
  position: absolute;
  border-radius: 16px;
  inset: 0;
  background-color: rgba(7, 7, 7, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: -1;
}
.yearsoftware_dis::after {
  content: "";
  position: absolute;
  border-radius: 16px;
  inset: 0;
  z-index: 1;
  background: hsla(0, 0%, 100%, 0.02);
  box-shadow: inset 0 24px 48px 0 rgba(199, 211, 234, 0.05), inset 0 1px 1px 0 rgba(199, 211, 234, 0.12);
  border: 1px solid rgba(209, 170, 215, 0.06);
  transition: all 0.3s ease;
}

.yearsoftware span {
  display: flex;
}

.borderline {
  position: relative;
}
.borderline::before {
  background: linear-gradient(#7C72FF, #2DA44E 80%, #3FB950);
  height: 100%;
  width: 2px;
  border-radius: 10px;
  content: "";
  position: absolute;
  right: 20px;
  top: 0;
}
.borderline::after {
  background-color: var(--cardBg);
  background-repeat: no-repeat;
  background-position: -10px 24px;
  bottom: -3px;
  border: 2px solid #3FB950;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border-radius: 40px;
  position: absolute;
  content: "";
  right: 11px;
  z-index: 2;
}

.borderline.lastblock::after {
  background-color: var(--cardBg);
  border: 2px solid #3FB950;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  bottom: -4px;
  content: "";
  right: 11px;
}

.newdetailspage .bannerimg {
  max-height: 400px;
  display: flex;
  -o-object-fit: cover;
     object-fit: cover;
}
.newdetailspage .bannerimg img {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}

.blogdetails_title {
  border-bottom: 1px solid #414141;
  display: flex;
  justify-content: space-between;
  margin-top: 130px;
  align-items: center;
}
.blogdetails_title a.backbtns {
  display: inline-flex;
  align-items: center;
}
.blogdetails_title a.backbtns span svg {
  border-radius: 0;
  max-width: 27px;
  transform: scaleX(-1);
}
.blogdetails_title a {
  color: #fff;
  display: inline-flex;
  padding: 4px;
  margin: 0 3px;
  text-decoration: none;
}
.blogdetails_title a:last-child {
  margin-right: 0;
}
.blogdetails_title a svg {
  width: 33px;
}

.blogsearch {
  background: rgba(134, 191, 242, 0.01);
  position: relative;
  padding: 10px 0;
}
.blogsearch .search {
  position: relative;
}
.blogsearch .search .form-control {
  background-color: transparent;
  border: 1px solid rgba(209, 170, 215, 0.09);
  height: 48px;
  color: #fff;
}
.blogsearch .search .form-control:focus {
  border: 1px solid rgba(209, 170, 215, 0.09);
}
.blogsearch .search .form-control::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5568627451);
  opacity: 1;
  /* Firefox */
}
.blogsearch .search .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5568627451);
  opacity: 1;
  /* Firefox */
}
.blogsearch .search .form-control::-ms-input-placeholder {
  /* Edge 12-18 */
  color: rgba(255, 255, 255, 0.5568627451);
}
.blogsearch .search .btn-outline-success {
  position: absolute;
  right: 10px;
  border: none;
  background: transparent;
  top: 8px;
}
.blogsearch .container {
  position: relative;
  z-index: 9;
}
.blogsearch::before {
  content: "";
  position: absolute;
  border-radius: 0px 0 16px 16px;
  inset: 0;
  background-color: rgba(7, 7, 7, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: -1;
}
.blogsearch::after {
  content: "";
  position: absolute;
  border-radius: 0px 0 16px 16px;
  inset: 0;
  z-index: 1;
  background: hsla(0, 0%, 100%, 0.02);
  box-shadow: inset 0 24px 48px 0 rgba(199, 211, 234, 0.05), inset 0 1px 1px 0 rgba(199, 211, 234, 0.12);
  border: 1px solid rgba(209, 170, 215, 0.06);
  transition: all 0.3s ease;
}
.blogsearch ul {
  display: flex;
  list-style: none;
  margin: 0;
  justify-content: flex-end;
}
.blogsearch ul li {
  padding: 4px 8px;
}
.blogsearch ul li a {
  color: #fff;
  padding: 8px 20px;
  background-color: transparent;
  border-color: hsla(0, 0%, 100%, 0.1);
  border-width: 1px;
  border-style: solid;
  display: inline-flex;
  border-radius: 6px;
  text-decoration: none;
  align-items: center;
}
.blogsearch ul li a:hover {
  background-color: hsla(0, 0%, 100%, 0.09);
  border-color: hsla(0, 0%, 100%, 0.1);
}
.blogsearch ul li a.active {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.blogdetail_page ul li {
  font-size: 18px;
  margin-bottom: 20px;
}
.blogdetail_page .blogmainimg img {
  border-radius: 10px;
}
.blogdetail_page h1 {
  font-size: 42px;
  font-weight: 500;
}
.blogdetail_page .author {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.blogdetail_page .author li {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: 16px;
  padding-right: 20px;
}
.blogdetail_page .author li span {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.6156862745);
  padding: 0 8px 0 0;
}

.spaceborderblock {
  display: block;
  position: relative;
  width: 100%;
  height: 2px;
  max-width: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%) 0% 0%/100% 100% repeat;
  opacity: 0.2;
  min-width: 0;
  flex-shrink: 0;
  border: 0 solid #e5e7eb;
}

/*------------*/
.spa-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 2em;
  height: 75px;
  z-index: 2;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.spa-header--scrolled {
  background: #fafafa;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.spa-header--move-up {
  transform: translateY(-75px);
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.spa-header__logo {
  color: #000;
}

.spa-header__link {
  margin-left: 1em;
  color: #000;
}

.sticky-nav-tabs,
.spa-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
}

.sticky-nav-tabs h1,
.spa-slide h1 {
  font-size: 2rem;
  margin: 0;
  letter-spacing: 1rem;
}

.sticky-nav-tabs h3,
.spa-slide h3 {
  font-size: 1rem;
  letter-spacing: 0.3rem;
  opacity: 0.6;
}

.sticky-nav-tabs-container {
  display: flex;
  flex-direction: row;
  bottom: 0;
  width: 100%;
  height: 75px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  list-style-type: none;
  margin: 0;
  padding: 6px;
  border: 1px solid hsla(0, 0%, 100%, 0.15);
  border-radius: 40px;
}

.sticky-nav-tabs-container--top-first {
  position: fixed;
  top: 75px;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 99;
  background-color: #000;
  left: 0;
}

.sticky-nav-tabs-container--top-second {
  position: fixed;
  top: 100px;
  left: 0;
  background-color: #000;
  z-index: 9;
}

.sticky-nav-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.1rem;
  transition: all 0.5s ease;
  font-size: 16px;
  padding: 0 16px;
}

.sticky-nav-tab:hover {
  color: white;
  background-color: #18191B;
  transition: all 0.5s ease;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.063);
}

.sticky-nav-tab-slider {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 6px;
  background: #66B1F1;
  transition: left 0.3s ease;
}

.platformtabs ul {
  position: absolute;
  content: "";
  border-bottom: 1px solid var(--borderColor);
  left: 0px;
  bottom: 2px;
  width: 100%;
  z-index: 0;
}
@media (max-width: 767.98px) {
  .platformtabs ul {
    position: relative;
  }
}
.platformtabs ul li {
  margin: 0 10px;
}
.platformtabs ul li:focus-visible, .platformtabs ul li:focus-within, .platformtabs ul li:target, .platformtabs ul li:hover {
  border: none !important;
  outline: none !important;
}
.platformtabs ul li button {
  background-color: transparent;
  border: none;
  color: #fff;
  padding: 8px 25px;
  position: relative;
  margin: 0;
  font-size: 20px;
}
@media (max-width: 1360px) {
  .platformtabs ul li button {
    font-size: 18px;
    padding: 8px 16px;
  }
}
@media (max-width: 1199px) {
  .platformtabs ul li button {
    font-size: 14px;
    padding: 8px 16px;
  }
}
.platformtabs ul li button.active {
  background-color: transparent !important;
  color: #fff !important;
  border: none !important;
}
.platformtabs ul li button.active::after {
  position: absolute;
  padding: 0px 4rem;
  padding-bottom: 10px;
  border-bottom: 6px solid var(--primaryColor);
  white-space: nowrap;
  content: "";
  bottom: -4px;
  width: 100%;
  border-radius: 10px;
  left: 0;
}
.platformtabs ul li button:hover, .platformtabs ul li button:focus, .platformtabs ul li button:visited, .platformtabs ul li button:focus-within, .platformtabs ul li button:target, .platformtabs ul li button:hover {
  background-color: transparent;
  border: none;
  box-shadow: none;
  color: #fff;
  margin: 0;
  outline: none;
}

.tabsvideos {
  position: relative;
}
.tabsvideos ul.aitower_product {
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 0px;
  padding: 0px;
  border: none;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.431372549);
  border-radius: 10px 10px 0 0;
}
.tabsvideos ul.aitower_product li {
  width: 50%;
}
.tabsvideos ul.aitower_product li button {
  background: rgba(0, 0, 0, 0.6196078431);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9220063025) 0%, rgba(0, 0, 0, 0) 56%);
  width: 100%;
  border-radius: 0px;
  padding: 15px 15px;
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  border: none;
}
.tabsvideos ul.aitower_product li button.active {
  background: rgba(1, 102, 255, 0.3019607843);
  border: none;
  border-radius: 10px 10px 0 0;
  color: #fff;
}
.tabsvideos .tab-content .tab-pane {
  position: relative;
}
.tabsvideos .tab-content .tab-pane::before {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9220063025) 0%, rgba(0, 0, 0, 0) 56%);
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  position: absolute;
}
.tabsvideos .tab-content .tab-pane .productdis {
  position: absolute;
  max-width: 380px;
  bottom: 100px;
  left: 40px;
  z-index: 1;
}
@media (max-width: 767.98px) {
  .tabsvideos .tab-content .tab-pane .productdis {
    bottom: 60px;
    left: 20px;
  }
}

.keyadvantages ul {
  list-style: none;
}
.keyadvantages ul li {
  position: relative;
  padding: 0 0px 10px 20px;
}
.keyadvantages ul li::after {
  position: absolute;
  left: 0;
  top: 3px;
  width: 8px;
  height: 8px;
  border: 1px solid #fff;
  content: "";
  border-radius: 50%;
}

.tagesfot_itms {
  width: 100%;
  flex-flow: wrap;
  padding-top: 15px;
}
.tagesfot_itms span {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 100, 140, 0.3);
  margin-right: 10px;
  margin-bottom: 8px;
  font-size: 16px;
}

/* Scroll Reveal Animation */
.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal-title {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal-title.revealed {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal-card {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal-card.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger delays for cards */
.scroll-reveal-card:nth-child(1) { transition-delay: 0s; }
.scroll-reveal-card:nth-child(2) { transition-delay: 0.1s; }
.scroll-reveal-card:nth-child(3) { transition-delay: 0.2s; }
.scroll-reveal-card:nth-child(4) { transition-delay: 0.3s; }
.scroll-reveal-card:nth-child(5) { transition-delay: 0.4s; }
.scroll-reveal-card:nth-child(6) { transition-delay: 0.5s; }

/* Global Homepage-Style Headings */
.section_title,
.presstitles,
.productpage_banner h1,
.blockbg h2,
.blockbgtwo h2,
.productlisting h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Gradient text effect for section titles */
.section_title span,
.presstitles span,
.productlisting h3 span {
  background: linear-gradient(135deg, #FFFFFF 0%, #d8b4fe 25%, #6b3fa0 50%, #4a2963 75%, #2d1f3d 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: heroGradientShift 4s ease-in-out infinite;
}

/* Product page banner title - large gradient heading */
.productpage_banner h1 {
  font-size: 4rem;
  background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 50%, #8B5CF6 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: heroGradientShift 4s ease-in-out infinite;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Block section headings */
.blockbg h2,
.blockbgtwo h2 {
  font-size: 4.5rem;
  color: #fff;
  margin-bottom: 15px;
}

/* Content section headings */
.productlisting h3,
.advancedvisibility h3 {
  font-size: 2rem;
  color: #fff;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
}

/* Body text styling */
.f-18 {
  font-family: 'Inter', sans-serif;
  line-height: 1.7;
}

/* Hero gradient animation */
@keyframes heroGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes sectionGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Responsive heading sizes */
@media (max-width: 768px) {
  .productpage_banner h1 {
    font-size: 2.5rem;
  }
  .blockbg h2,
  .blockbgtwo h2 {
    font-size: 1.8rem;
  }
  .productlisting h3,
  .advancedvisibility h3 {
    font-size: 1.5rem;
  }
}

.faqaccordion {
  border: 1px solid var(--borderColor);
}
.faqaccordion .accordion-item {
  border: 1px solid var(--borderColor);
  background-color: transparent;
  color: var(--textColor);
}
.faqaccordion .accordion-item .accordion-button {
  background-color: var(--cardBg);
  color: var(--textColor);
  padding: 14px !important;
  font-size: 22px;
}
.faqaccordion .accordion-item .accordion-button:focus,
.faqaccordion .accordion-item .accordion-button:visited {
  outline: inherit;
  box-shadow: none;
}
.faqaccordion .accordion-button:not(.collapsed) {
  background-color: var(--cardBg);
  color: #fff;
  border-left: 1px solid var(--borderColor);
  border-right: 1px solid var(--borderColor);
  color: var(--textColor);
  box-shadow: none;
}
.faqaccordion .accordion-button::after {
  background-image: url(https://skylarklabs.ai/assets/images/uparrow.svg);
  background-size: 22px;
  background-repeat: repeat;
  width: 24px;
  height: 24px;
}
.faqaccordion .accordion-button:not(.collapsed)::after {
  background-image: url(https://skylarklabs.ai/assets/images/downarrow.svg);
  background-size: 22px;
  background-repeat: repeat;
  width: 24px;
  height: 24px;
}
.faqaccordion .accordion-body {
  position: relative;
  padding-left: 40px !important;
}
.faqaccordion .accordion-body:after {
  background: rgba(255, 255, 255, 0.8549019608);
  position: absolute;
  content: "";
  width: 2px;
  height: 60%;
  left: 26px;
  top: 30px;
}

.blockcard {
  margin: 6px;
  padding: 20px;
  border-radius: 8px;
  position: relative;
}
.blockcard img {
  border-radius: 8px;
  position: relative;
  z-index: 9;
}
.blockcard p {
  position: relative;
  z-index: 3;
  margin-bottom: 0;
}

.frontiercolor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.frontiercolor::before {
  content: '';
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, #8B5CF6, #E879F9);
  border-radius: 2px;
}
.frontiercolor span {
  background: linear-gradient(135deg, #8B5CF6 0%, #E879F9 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.15em;
}

.customers {
  margin-bottom: 60px;
}
.customers .customerslist {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background: none;
  box-shadow: none;
  overflow: hidden;
  position: relative;
  transition-property: all;
  transition-duration: 0.5s;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1450980392);
}
.customers .customerslist:hover {
  border: 1px solid #fff;
}
.customers .customerslist a {
  text-decoration: none;
}
.customers .customerslist a .boxlogo {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  height: 215px;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.0274509804);
  min-width: 0;
  flex-shrink: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.customers .customerslist a .boxlogo div {
  text-align: center;
}
.customers .customerslist a .logodis {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 32px;
  color: #fff;
}
.customers .customerslist a .logodis .titleblog span {
  text-transform: uppercase;
  background: linear-gradient(135deg, #8B5CF6 0%, #E879F9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: rgba(255, 255, 255, 0.1843137255);
  display: inline-flex;
}
.customers .customerslist a .logodis p span {
  background: linear-gradient(135deg, #8B5CF6 0%, #E879F9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blockcenter {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.logocenterblock {
  display: flex;
  justify-content: center;
}
.logocenterblock ul {
  display: flex;
  list-style: none;
}
@media (max-width: 600px) {
  .logocenterblock ul {
    flex-flow: wrap;
  }
}
.logocenterblock ul li {
  padding: 0px 10px;
  align-items: center;
}
.logocenterblock ul li img {
  max-width: 100%;
  width: 190px;
}

.p_borderbottom {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1921568627);
  padding-bottom: 20px !important;
}

.customcode_blog a {
  color: #fff;
  text-decoration: none;
}
.customcode_blog a .categoryname {
  background: linear-gradient(119deg, #BC8BC5 49%, rgb(224, 80, 255) 197%) 0% 0%/100% 100% no-repeat padding-box;
  background-clip: text;
  -webkit-background-clip: text;
  text-transform: uppercase;
  color: transparent;
  display: inline-flex;
  margin-right: 8px;
}
.customcode_blog .dateoptions {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1607843137);
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  border-radius: 40px;
  padding: 5px 20px;
  color: rgba(255, 255, 255, 0.4509803922);
  font-size: 14px;
}

.customcode {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.customcode p a {
  color: #fff;
  font-size: 18px;
  text-decoration: none;
}

.hieghtspace {
  padding-bottom: 140px;
}

.bookademo_modal {
  background-color: #1f1e1e;
}
.bookademo_modal .formfild .input {
  background: hsla(0, 0%, 100%, 0.02);
  border: 1px solid hsla(0, 0%, 100%, 0.1);
  width: 100%;
  box-shadow: none;
  border-radius: 6px;
  padding: 10px 10px;
  color: #fff;
}
.bookademo_modal .formfild .input:focus {
  border: 1px solid hsla(0, 0%, 100%, 0.1);
  outline: inherit;
}
.bookademo_modal .checkboxbtns {
  min-width: 16px !important;
  min-height: 16px !important;
  background: hsla(0, 0%, 100%, 0.02);
  border: 1px solid hsla(0, 0%, 100%, 0.2);
}

.modalheader {
  position: relative;
}
.modalheader .custom-close {
  position: absolute;
  top: -40px;
  right: -40px;
  background-color: #fff;
  width: 30px;
  color: #fff;
  height: 30px;
  border-radius: 100%;
  z-index: 3;
  opacity: 1;
}

@media (min-width: 800px) {
  .sticky-nav-tabs h1,
  .spa-slide h1 {
    font-size: 3rem;
  }
  .sticky-nav-tabs h3,
  .spa-slide h3 {
    font-size: 1rem;
  }
  .sticky-nav-tab {
    font-size: 16px;
  }
}
.webspace {
  padding-bottom: 180px;
}
@media (max-width: 1024px) {
  .webspace {
    padding-bottom: 40px;
  }
  .blockbg {
    padding: 110px 0 25px 0;
    margin-top: 0 !important;
  }
  .heroSwiper + .blockbg {
    margin-top: 0px !important;
    padding: 60px 0 60px 0 !important;
  }
}

@media (max-width: 800px) {
  .blockbg {
    padding: 90px 0 20px 0;
  }
  .heroSwiper + .blockbg {
    margin-top: 0px !important;
    padding: 50px 0 50px 0 !important;
  }
}

@media (max-width: 767.98px) {
  .blockbg {
    padding: 80px 0 20px 0;
    margin-top: 0 !important;
  }
  .heroSwiper + .blockbg {
    margin-top: 0px !important;
    padding: 40px 0 40px 0 !important;
  }
}

@media (max-width: 650px) {
  .blockbg {
    padding: 70px 0 20px 0;
  }
  .heroSwiper + .blockbg {
    margin-top: 0px !important;
    padding: 40px 0 40px 0 !important;
  }
}

@media (max-width: 767.98px) {
  .blockbg {
    padding: 40px 0;
    margin-top: 0 !important;
  }
  .heroSwiper + .blockbg {
    margin-top: 0px !important;
    padding: 40px 0 40px 0 !important;
  }
  .hieghtspace {
    padding-bottom: 0;
  }
  .flex-sm-column-reverse-mobile {
    flex-direction: column-reverse !important;
  }
  .webspace {
    padding-bottom: 0px;
  }
  .mobilebottom_space {
    padding-bottom: 60px;
  }
  .tabsvideos ul.aitower_product li {
    width: 50%;
  }
  .tabsvideos ul.aitower_product li button {
    padding: 10px 10px;
    font-size: 18px;
  }
}
@media (max-width: 767.98px) and (max-width: 767.98px) {
  .tabsvideos ul.aitower_product li button {
    font-size: 15px;
  }
}
@media (max-width: 767.98px) {
  .footer-container .footer_bolckone {
    flex: 100%;
  }
  .footer-container .footer_bolcktwo {
    flex: 33.333%;
  }
  .footer-container .footer_bolcktwo p {
    font-size: 18px;
  }
}
@media (max-width: 767.98px) {
  .ai-benifits-tabs-container .tab-vid-container {
    min-height: auto;
    display: flex;
    flex-flow: column;
  }
  .ai-benifits-tabs-container .tab-vid-container .vid-text-container {
    position: inherit;
    padding: 10px 0 !important;
  }
}
/*----Download----*/
.footerlogo {
  display: inline-block;
}

.footerlogo img {
  max-width: 150px;
}

.brochure-download-btn {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
}

.brochure-download-btn:hover {
  background-color: #45a049;
}

.brochure-modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.brochure-modal-content {
  background-color: #1f1e1e;
  margin: 15% auto;
  padding: 20px;
  width: 400px;
  border-radius: 5px;
}

.brochure-modal-content h2 {
  font-size: 22px;
  margin-bottom: 15px;
}

.brochure-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.brochure-close:hover {
  color: black;
}

.brochure-form-group {
  margin-bottom: 15px;
}

.brochure-label {
  display: block;
  margin-bottom: 5px;
}

.brochure-input {
  width: 100%;
  padding: 8px;
  border: 1px solid hsla(0, 0%, 100%, 0.1);
  border-radius: 4px;
  box-sizing: border-box;
  color: #fff;
  background-color: hsla(0, 0%, 100%, 0.02);
}

.brochure-submit-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.brochure-submit-btn:hover {
  background-color: #45a049;
}

.brochure-error {
  color: red;
  font-size: 12px;
  margin-top: 5px;
  display: none;
}

#country-code {
  border: 1px solid hsla(0, 0%, 100%, 0.1) !important;
  background: hsla(0, 0%, 100%, 0.02);
  color: #fff;
}

.sitemappage a {
  color: rgba(255, 255, 255, 0.5647058824);
  font-size: 16px;
  text-decoration: none;
}
.sitemappage h4 {
  margin-top: 40px;
  font-size: 18px;
}
.sitemappage ul {
  display: flex;
  flex-flow: wrap;
  list-style: none;
  margin: 0px;
  padding: 0;
}
.sitemappage ul li {
  max-width: 25%;
  width: 100%;
  margin-top: 16px;
}
.sitemappage ul li a {
  color: rgba(255, 255, 255, 0.5647058824);
  font-size: 16px;
  text-decoration: none;
}

.system-card-tabs ul {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-flow: nowrap;
  border: none;
}
.system-card-tabs ul li {
  margin: 0px;
  width: 100%;
}
.system-card-tabs ul li button {
  width: 100%;
  font-size: 16px;
}

.system-card-video {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  max-height: 600px;
  padding: 20px;
}
.system-card-video .tab-pane {
  background: radial-gradient(94.68% 316.73% at 0% 0%, #151515, #070707), linear-gradient(0deg, rgba(255, 255, 255, 0.0117647059), rgba(255, 255, 255, 0.0117647059));
  border: 1px solid #323232;
  border-radius: 14px;
  padding: 20px;
}
.system-card-video video {
  border-radius: 18px;
}
.system-card-video .tagesbox {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 10px;
}
.system-card-video .tagesbox::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 300px;
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9584208683) 0%, rgba(0, 0, 0, 0) 58%);
  border-radius: 18px;
  bottom: -3px;
}
.system-card-video .tagesbox .textblock {
  position: relative;
  z-index: 3;
  margin-left: 40px;
  bottom: 40px;
}

.system-card-tabs {
  position: absolute;
  bottom: 49px;
  width: 100%;
  left: 0;
  padding: 0 40px;
}
.system-card-tabs li {
  padding: 0 1px;
}

.system-card {
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid #475569;
  border-radius: 0px;
  padding: 20px 20px;
  transition: all 0.3s ease;
  position: relative;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.system-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.05), rgba(8, 145, 178, 0.02));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.system-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(6, 182, 212, 0.2);
  border-color: #06b6d4;
}

.system-card:hover::before {
  opacity: 1;
}

.system-card .nav-tabs .nav-link:focus,
.system-card .nav-tabs .nav-link:hover {
  border-color: transparent !important;
}

.tabsouters {
  border-top: 1px solid rgba(255, 255, 255, 0.1490196078);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1490196078);
  margin-bottom: 40px;
}
.tabsouters .nav-tabs {
  display: flex;
  flex-flow: nowrap;
  justify-content: space-between;
  border: none;
}
.tabsouters .nav-tabs li {
  width: 100%;
}
.tabsouters .nav-tabs li.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  border-right: 1px solid rgba(255, 255, 255, 0.1490196078);
  transition: background-color 0.3s;
}
.tabsouters .nav-tabs li.nav-item button {
  width: 100%;
  background-color: transparent;
  font-size: 22px;
  font-weight: 600;
  border: none;
  color: #fff;
  font-size: 18px;
  padding: 18px 20px;
}
.tabsouters .nav-tabs li.nav-item button.active {
  background: url(https://skylarklabs.ai/assets/images/dots-use-cases.png);
  background-repeat: no-repeat;
}
.tabsouters .nav-tabs li.nav-item button.active span {
  background: linear-gradient(135deg, #8B5CF6 0%, #E879F9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tabsouters .nav-tabs li:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.1490196078);
}

.videoblock {
  position: relative;
}

/* Video Gallery Section */
.video-gallery-section {
  padding: 80px 0;
  background: linear-gradient(180deg, #0a0b0d 0%, #1a1d23 100%);
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  color: #ffffff;
}

.section-subtitle {
  text-align: center;
  color: #b8bcc8;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 60px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  margin-bottom: 60px;
}

.video-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s ease;
  cursor: pointer;
}

.video-card:hover {
  transform: translateY(-10px);
  border-color: #00ff7f;
  box-shadow: 0 25px 50px rgba(0, 255, 127, 0.15);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 228px;
  background: linear-gradient(135deg, #1a1d23, #2d3138);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.video-thumbnail::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(0, 255, 127, 0.1), rgba(0, 191, 255, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-card:hover .video-thumbnail::before {
  opacity: 1;
}

.video-play-btn {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.5019607843);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 2;
  position: absolute;
}

.video-play-btn::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 15px solid #000;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 3px;
}

.video-info {
  padding: 25px;
}

.video-title {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #ffffff;
}

.video-description {
  color: #b8bcc8;
  font-size: 1.8rem;
  margin-bottom: 15px;
  line-height: 1.6;
}

.video-duration {
  display: inline-block;
  background: rgba(0, 255, 127, 0.1);
  color: #00ff7f;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 500;
}

.video-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}

.video-tag {
  background: rgba(0, 191, 255, 0.1);
  color: #00bfff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 1.4rem;
  font-weight: 500;
}

.video-info ul {
  list-style: disc;
  line-height: 1.8;
}
.video-info ul li {
  margin-bottom: 4px;
}

.video-tags a {
  text-decoration: none;
}
.video-tags a span {
  display: inline-flex;
  padding: 4px 16px;
}

.imgvideothumb .video-thumbnail {
  height: auto;
  max-height: 320px;
}

/* Strategic Sectors Grid Layout */
.strategic-sectors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 60px;
}

/* Strategic Sector Card */
.strategic-sector-card {
  min-height: 200px;
}

/* Strategic Sector Media */
.strategic-sector-media {
  height: 200px !important;
  position: relative;
  overflow: hidden;
}

.strategic-sector-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Strategic Sector Content */
.strategic-sector-content {
  padding: 1px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  min-height: 180px;
}

/* Strategic Sector Title */
.strategic-sector-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: white;
}

/* Strategic Sector Description */
.strategic-sector-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  line-height: 1.5;
}

/* Strategic Sector Tags */
.strategic-sector-tags {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Card Styles */
.blockcard {
  position: relative;
  padding: 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  height: 100%;
  overflow: hidden;
}

/* Image Styles */
.blockcard img {
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

/* Text Styles */
.blockcard .f-20 {
  font-size: 20px;
  font-weight: 500;
  margin-top: 15px;
  margin-bottom: 0;
}

/* Hover Effects */
.blockcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.blockcard:hover img {
  transform: scale(1.05);
}

/* Enhanced f-card styling */
.f-card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  overflow: hidden;
  transition: transform 350ms ease;
}

.f-card:hover {
  transform: translateY(-6px);
}

.f-card .f-media {
  height: 390px;
  position: relative;
  overflow: hidden;
}

.neon-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(113, 77, 255, 0.24), rgba(225, 81, 255, 0.22));
  color: #efe8ff;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 200ms ease;
}

.neon-chip:hover {
  transform: translateY(-1px);
}

/* Defense Solutions Styling */
.defense-solutions-header {
  text-align: center;
  margin-bottom: 80px;
}

.defense-solutions-title {
  font-size: 56px;
  margin-bottom: 24px;
}

.defense-solutions-title span {
  color: #ffffff;
}

.defense-solutions-subtitle {
  font-size: 20px;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.6);
}

.defense-solutions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 60px;
}

.defense-main-card {
  height: 100%;
}

.defense-main-content {
  padding: 32px;
}

.defense-main-title {
  font-size: 28px;
  margin-bottom: 16px;
  color: white;
  font-weight: 600;
}

.defense-main-description {
  opacity: 0.5;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.defense-main-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.defense-sub-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 15px;
  height: 100%;
}

.defense-sub-card .f-media {
  height: 200px;
}

.defense-sub-content {
  padding: 16px;
}

.defense-sub-title {
  font-size: 16px;
  margin-bottom: 8px;
  color: white;
  font-weight: 600;
}

.defense-sub-description {
  opacity: 0.5;
  font-size: 13px;
  line-height: 1.4;
}

/* Responsive Grid Behavior */
@media (max-width: 1200px) {
  .strategic-sectors-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .defense-solutions-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
@media (max-width: 768px) {
  .strategic-sectors-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .defense-solutions-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .defense-sub-cards-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}
/* Defense Solutions Section Styling */
.defense-section-header {
  text-align: center;
  margin-bottom: 80px;
}

.defense-section-title {
  font-size: 56px;
  margin-bottom: 24px;
}

.defense-section-title span {
  color: #ffffff;
}

.defense-section-subtitle {
  font-size: 20px;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
}

.defense-solutions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 60px;
}

.defense-main-card {
  height: 100%;
}

.defense-main-content {
  padding: 32px;
}

.defense-main-title {
  font-size: 28px;
  margin-bottom: 16px;
  color: white;
  font-weight: 600;
}

.defense-main-description {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.defense-main-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.defense-sub-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 15px;
  height: 100%;
}

.defense-sub-card {
  height: auto;
}

.defense-sub-media {
  height: 200px;
}

.defense-sub-media.large {
  height: 220px;
}

.defense-sub-content {
  padding: 16px;
}

.defense-sub-title {
  font-size: 16px;
  margin-bottom: 8px;
  color: white;
  font-weight: 600;
}

.defense-sub-description {
  font-size: 13px;
  line-height: 1.4;
}

.defense-video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Mobile Layout Styling */
.mobile-defense-grid {
  display: none;
}

.mobile-defense-card {
  margin-bottom: 24px;
}

.mobile-defense-media {
  height: 200px;
}

.mobile-defense-content {
  padding: 24px;
}

.mobile-defense-title {
  font-size: 20px;
  margin-bottom: 12px;
  color: white;
}

.mobile-defense-description {
  font-size: 16px;
  line-height: 1.5;
}

/* Placeholder Card Styling */
.placeholder-card {
  opacity: 0.3;
}

.placeholder-media {
  height: 220px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-text {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

.placeholder-title {
  font-size: 16px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}

.placeholder-description {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .defense-solutions-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .defense-sub-cards-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .mobile-defense-grid {
    display: block;
  }
  .defense-solutions-grid {
    display: none;
  }
}/*# sourceMappingURL=style.css.map */
/* Breadcrumb trail clearance -----------------------------------------------
   header.fixed-after-scroll is position:fixed; top:0; z-index:1020, so anything
   at the top of the document renders UNDERNEATH it. Measured extent: 102px at
   1440 and 86px at 390. Geometry is constant across scroll states -
   .fixed-after-scroll and .fixed-after-scroll.fixed both resolve to top:0, and
   scripts/fixed-header.js only toggles that class - so clearing the scrollY-0
   height is sufficient.

   Scoped to .sl-crumbs, NOT to .backlink, deliberately. A global .backlink rule
   would un-hide the old back-links on every page not yet migrated, which is a
   site-wide visual change nobody approved. The distinction disappears once all
   154 pages carry breadcrumbs.

   The .bth-page .backlink.sl-crumbs form (0,3,0) is needed to beat
   editorial.css's .bth-page .backlink (0,2,0), which loads after this file.

   The clearance is scoped to .bth-page, not applied to .sl-crumbs globally.
   It exists because on a use-case article the trail is the FIRST thing in the
   document and would otherwise sit under the fixed header. On news, team and
   root pages the trail goes inside a hero that already clears the header, so
   an unscoped 126px would push every one of those heroes down by that much. */
.bth-page .backlink.sl-crumbs { padding-top: 126px; }
@media (max-width: 480px) {
  .bth-page .backlink.sl-crumbs { padding-top: 110px; }
}

/* Breadcrumb leaf, divider and focus ----------------------------------------
   .bth-page .backlink a styles ANCHORS. The leaf correctly carries no href - it
   is the current page and stays unlinked - so it fell through to Bootstrap's
   --bs-breadcrumb-item-active-color, a LIGHT-THEME default. Measured on the
   live pilot: rgba(33,37,41,.75) over #0A0A0A = 1.18:1. Unreadable. The "/"
   divider inherits --bs-breadcrumb-divider-color and was equally dark.

   This site is dark-themed and uses Bootstrap, whose component defaults assume
   a light background. Any Bootstrap component adopted here must be
   contrast-checked, not assumed to inherit the palette.

   Contrast against #0A0A0A:
     --ink   #F2F2EE  17.64:1  AAA
     --ink-2 #D0D0CB  12.79:1  AAA   <- leaf: brighter than links, marks "you are here"
     --ink-3 #888884   5.56:1  AA    <- links and divider: legible, recessive
   Fallback literals are given because --ink-* are declared on .bth-page, which
   team, news and root pages do not carry. */
.sl-crumbs .breadcrumb { --bs-breadcrumb-divider-color: var(--ink-3, #888884); }

/* The crumb LINKS took all of their typography and colour from
   editorial.css's `.bth-page .backlink a`, which exists only on use-case
   articles. On a news, team or root page that rule does not match, so the
   links would have fallen back to the page's default anchor styling while the
   leaf beside them stayed 11px mono uppercase -- a trail styled half one way
   and half the other. Restate it self-containedly, keyed on .sl-crumbs.

   On use-case pages this changes nothing: `.sl-crumbs .breadcrumb-item a`
   is (0,2,1) and beats `.bth-page .backlink a` (0,2,0), but every value below
   is the one that rule already resolved to.

   Those pages' background is #050507 (body, !important), not the #0A0A0A of
   .bth-page. Darker, so every ratio here is met or exceeded.

   TYPOGRAPHY IS SET ON THE <li>, NOT ON THE <a>. That distinction is the whole
   fix for a 6px vertical misalignment: the leaf's text sat higher than the
   links', measured at 1440 as text top 127.5 against 133.5, while all three
   list items shared a box top of 126.

   The cause was the DIVIDER, not the text. Bootstrap's separator is a ::before
   on the list item, and ::before inherits font-size from its element. While
   font-size lived on `.breadcrumb-item a` for links but on
   `.breadcrumb-item.active` for the leaf, the linked items' <li> kept the
   inherited 16px -- so their slashes rendered at 16px/25.6px while the leaf's
   rendered at 11px/17.6px. Each item's line box is sized by its own strut, so
   the taller slash pushed the link text to a lower baseline and the leaf's did
   not. Shrinking the leaf in the earlier contrast fix silently shrank its
   separator.

   So font-size, line-height and family are declared once for the item, its
   anchor and its ::before together, and .active now carries colour ONLY. Any
   future change that special-cases one crumb's size will reintroduce this. */
.sl-crumbs .breadcrumb-item,
.sl-crumbs .breadcrumb-item a,
.sl-crumbs .breadcrumb-item::before {
  font-family: var(--bth-mono, "JetBrains Mono", ui-monospace, Menlo, monospace);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sl-crumbs .breadcrumb-item a {
  color: var(--ink-3, #888884);
  text-decoration: none;
  transition: color 140ms ease;
}
.sl-crumbs .breadcrumb-item a:hover { color: var(--ink, #F2F2EE); }
@media (max-width: 480px) {
  .sl-crumbs .breadcrumb-item,
  .sl-crumbs .breadcrumb-item a,
  .sl-crumbs .breadcrumb-item::before { font-size: 10px; letter-spacing: 0.12em; }
}

/* Gap to the h1. The use-case variant sits in a .backlink container whose own
   padding already separates it from .article-head, so exclude it rather than
   shift 53 pages that have been signed off. Everywhere else the trail is the
   first child of a hero and would otherwise sit flush against the heading. */
.sl-crumbs:not(.backlink) { margin-bottom: 14px; }

/* Colour only. Size and line-height come from the shared rule above -- putting
   them back here is what caused the 6px misalignment. 12.79:1 on #0A0A0A. */
.sl-crumbs .breadcrumb-item.active { color: var(--ink-2, #D0D0CB); }
/* Bootstrap's :focus-visible rules cover .btn and .nav-link only, so a plain
   <a> relied on the user-agent default ring. Make it explicit for a navigation
   component, at 17.6:1 on the dark background. */
.sl-crumbs a:focus-visible { outline: 2px solid var(--ink, #F2F2EE); outline-offset: 2px; }

/* Mega-menu section labels were <h2> and so picked up the blanket
   `h2 { font-size: NNpx !important }` rules below 992px, overriding their own inline
   14px. They are now <div class="sl-mnav-label"> so they no longer sit in the document
   outline (they were placing 4 H2s before the H1 on all 152 pages). These two rules
   reproduce the previous rendering exactly — verified by computed style at 500/800/1440px.
   !important is required to beat the inline 14px, which is what the h2 rules were doing.
   Delete both rules if the intended size was the inline 14px at every width. */
@media only screen and (max-width: 767px) {
  .sl-mnav-label { font-size: 22px !important; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sl-mnav-label { font-size: 24px !important; }
}