:root {
  /* === Brand Palette === */
  --color-primary: #0066CC;
  --color-primary-light: #3399FF;
  --color-primary-dark: #004080;

  --color-accent: #00FFCC;
  --color-secondary: #1A1A2E;

  /* === Cyber Palette (UI Theme) === */
  --cyber-100: #e0edff;
  --cyber-400: #60a5fa;
  --cyber-500: #38bdf8;
  --cyber-600: #2563eb;
  --cyber-700: #1d4ed8;
  --cyber-800: #0f172a;
  --cyber-900: #0a1929;

  /* === UI Base Colors === */
  --color-white: #ffffff;
  --color-light: #f7f9fc;
  --color-muted: #9CA3AF;
  --color-border: rgba(13, 42, 69, 0.1);

  /* === Effects === */
  --blur-bg-white: rgba(255, 255, 255, 1);
  --blur-overlay-cyan: rgba(14, 165, 233, 0.2);
  --shadow-light: 0 0 15px 2px #dbdbdb;
  --transition-base: all 0.3s ease;
}


/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #38bdf8;  /* Purple */
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background-color: #38bdf8;  /* Light Blue/Gray */
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #38bdf8 #ecf0f1;
}



.navbar-brand-icon {
  color: #0f172a; /* fallback color */
}
.logo-img{
  width: 100%;
}
.text-cyber-800 {
  color: #0f172a;
}

.text-cyber-600 {
  color: #38bdf8;
}

.bg-cyber-600 {
  background-color: #2563eb;
}

.bg-cyber-600:hover {
  background-color: #1d4ed8;
}

.navbar-blur {
  background-color: rgba(255, 255, 255, 1);
  backdrop-filter: blur(10px);
}
.navbar li a:hover{
  color: var(--cyber-500);
}

/* Hero Section */
.hero-section {
  padding-top: 8rem;
  padding-bottom: 5rem;
  background-image: linear-gradient(to bottom right, #0d2b45, #0a1929);
  position: relative;
}

.btn-cyber-primary {
  background-color: var(--cyber-500);
  color: white;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  border: none;
}

.btn-cyber-primary:hover {
  background-color: #ffffff;
  color: black;
}
.btn{
  padding: .5rem 2rem;
    font-size: 0.875rem;
}
.text-cyber-400 {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}

.hero-icons-wrapper {
  position: relative;
  height: 400px;
}

.floating-icon {
  position: absolute;
  background-color: rgb(14 165 233 / 0.2);
  backdrop-filter: blur(10px);
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: float 6s ease-in-out infinite;
}

.floating-icon.delay-1 {
  animation-delay: 1s;
}
.floating-icon.delay-2 {
  animation-delay: 2s;
}

.feature-box {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.3s ease-in-out;
}

.feature-box:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.feature-box-heading{
  font-size: 1.25rem;
}
.feature-box-paragraph{
  font-size: .9rem;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}


/* Services Section */


.cyber-gradient-text {
  background: linear-gradient(to right, #38bdf8, #5b98e3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-cyber {
  width: 48px;
  height: 48px;
  color: #38bdf8;
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}

.hover-shadow:hover {
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}
.card-body{
  transition: all .2s ease;
}
.card-body:hover{
  box-shadow: 0 0 10px 0px #00000029;
}
.card-title{
  font-size: 1.75rem;
}
.card-text{
  color: #00000054;
}
.services-btn{
  background-color: #0284c7;
}
.services-base-para{
  color: black !important;
}

/* About Section */

.about-gradient {
  background-image: linear-gradient(to bottom right, #0d2b45, #0a1929);
  position: relative;
}

.text-cyber-400 {
  color: #38bdf8;
}

.bg-cyber-500 {
  background-color: rgb(14 165 233 / 0.2);
}
.cyber-box{
  border-width: 1px;
  border-color: rgb(14 165 233 / 0.3);
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(14 165 233 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
  padding: 2.5rem !important;
}
.about-heading{
  font-size: 2.25rem;
}
.highlighted-text{
  color: #38bdf8;
}



.text-cyber-800 {
  color: #0f172a;
}

.capability-card {
  border: 1px solid rgba(13, 42, 69, 0.1);
  border-left: 4px solid #38bdf8;
  background-color: #f9fbff;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  transition: all 0.3s ease-in-out;
}

.capability-card:hover {
  background-color: #eaf1ff;
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.05);
}


/* Contact Us */

.text-cyber-600 {
  color: #38bdf8;
}

.text-cyber-800 {
  color: #0f172a;
}


.icon-box {
  background-color: #e0edff;
  padding: 8px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* contact div */
.contact-form input{
  background-color: #f7f9fc;
  border-radius: 3px;
  margin: 0 !important;
}
.contact-form textarea{
  background-color: #f7f9fc;
  border-radius: 3px;
}
.contact-form label{
  font-weight: 600;
  margin: 0 !important;
}

.contact-div{
  border-radius: 1px !important;
  box-shadow: 0 0 15px 2px #dbdbdb !important;
}


/* footoer */


.hover-cyber:hover {
  color: #60a5fa !important;
}
.text-secondary{
  font-size: 1rem;
  margin-bottom: .5rem;
  text-decoration: none;
  font-weight: 500;
  color: #9CA3AF;
}
.footer-bg{
  --tw-bg-opacity: 1;
  background-color: rgb(10 25 41 / var(--tw-bg-opacity, 1));
}

.guarantee-card{
  border-left: 3px solid #60a5fa !important;
}



/* Framework */

.framework-slider-container {
  overflow: hidden;
  width: 100%;
  padding: 1rem 0;
  position: relative;
}

.framework-slider {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: slide-left 30s linear infinite;
}

.framework-strip {
  height: 60px;
  filter: grayscale(0%);
  opacity: 1;
  transition: all 0.3s ease;
  will-change: transform;
}

/* Pause animation and grey out others */
.framework-slider-container:hover .framework-slider {
  animation-play-state: paused;
}

.framework-slider-container:hover .framework-strip {
  filter: grayscale(100%) opacity(0.5);
}

.framework-strip:hover {
  filter: grayscale(0%) opacity(1) !important;
}

/* Seamless scroll */
@keyframes slide-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.pmp-banner-section {
  height: 20vh;
  background-image: linear-gradient(to bottom right, #0d2b45, #0a1929);
  display: flex;

}

.pmp-text h5 {
  font-size: 2.1rem;
}

.highlight-pmp {
  color: var(--cyber-400);
}



#mouse-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  background-color: #38bdf8;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.05s linear;
}



.Team-div h2{
    font-size: 3rem !important;
}

.team-btn{
    background-color: #38bdf8;
    border: 1px solid #38bdf8;
}

.team-btn:hover{
    border: 1px solid #38bdf8;
    background-color: transparent;
    color: #38bdf8;
    
}
