/* ==========================================================
   NELAXA
   Modern Software Company Theme
   Version : 1.0
==========================================================*/

:root {
  --primary: #2563eb;
  --primary-dark: #1e40af;
  --secondary: #0f172a;
  --accent: #06b6d4;

  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;

  --dark: #020617;
  --text: #1e293b;
  --light: #64748b;

  --white: #ffffff;

  --bg: #f8fafc;
  --card: #ffffff;

  --border: #e2e8f0;

  --radius: 18px;

  --shadow-sm: 0 8px 25px rgba(15, 23, 42, 0.05);
  --shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 40px 80px rgba(15, 23, 42, 0.12);

  --transition: 0.35s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;

  background: var(--bg);

  color: var(--text);

  overflow-x: hidden;

  font-size: 16px;

  line-height: 1.7;
}

/* Scrollbar */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #eef2f7;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary), var(--accent));

  border-radius: 20px;
}

/* Selection */

::selection {
  background: var(--primary);

  color: #fff;
}

/* Links */

a {
  text-decoration: none;

  transition: var(--transition);
}

a:hover {
  color: var(--primary);
}

/* Images */

img {
  max-width: 100%;

  display: block;
}

/* Section */

section {
  padding: 100px 0;

  position: relative;
}

/* Container */

.container {
  max-width: 1240px;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Space Grotesk", sans-serif;

  font-weight: 700;

  color: var(--secondary);

  line-height: 1.2;
}

h1 {
  font-size: 64px;
}

h2 {
  font-size: 46px;
}

h3 {
  font-size: 32px;
}

h4 {
  font-size: 26px;
}

p {
  font-size: 17px;

  color: var(--light);

  margin-bottom: 18px;
}

/* Buttons */

.btn-main {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 18px 36px;

  border-radius: 60px;

  background: linear-gradient(135deg, #2563eb, #06b6d4);

  color: #fff;

  font-weight: 700;

  box-shadow: 0 20px 50px rgba(37, 99, 235, 0.28);

  transition: 0.35s;
}

.btn-main:hover {
  transform: translateY(-6px);

  box-shadow: 0 30px 60px rgba(37, 99, 235, 0.35);

  color: #fff;
}

.btn-outline-main {
  padding: 16px 34px;

  border: 2px solid var(--primary);

  border-radius: 50px;

  color: var(--primary);

  font-weight: 600;

  transition: 0.4s;
}

.glass-card {
  background: rgba(255, 255, 255, 0.75);

  backdrop-filter: blur(18px);

  border: 1px solid rgba(255, 255, 255, 0.6);

  border-radius: 24px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.section {
  padding: 120px 0;
}

.btn-outline-main:hover {
  background: var(--primary);

  color: #fff;
}

/* Glass */

.glass {
  background: rgba(255, 255, 255, 0.65);

  backdrop-filter: blur(16px);

  border: 1px solid rgba(255, 255, 255, 0.4);

  box-shadow: var(--shadow);

  border-radius: 20px;
}

/* Cards */

.card-modern {
  background: #fff;

  padding: 40px;

  border-radius: 20px;

  box-shadow: var(--shadow-sm);

  transition: 0.35s;

  height: 100%;
}

.card-modern:hover {
  transform: translateY(-10px);

  box-shadow: var(--shadow-lg);
}

/* Section Title */

.section-sub {
  color: var(--primary);

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 2px;

  margin-bottom: 10px;
}

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

.section-desc {
  max-width: 700px;
}

/* Gradient Text */

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #06b6d4, #7c3aed);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;
}

/* Background */

.bg-dark {
  background: var(--secondary);
}

.bg-dark h2,
.bg-dark h3,
.bg-dark h4 {
  color: #fff;
}

.bg-dark p {
  color: #cbd5e1;
}

/* Badge */

.badge-modern {
  display: inline-block;

  padding: 10px 18px;

  background: #eff6ff;

  border-radius: 30px;

  font-weight: 600;

  color: var(--primary);
}

/* Loader */

#page-loader {
  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: #fff;

  z-index: 99999;

  display: flex;

  justify-content: center;

  align-items: center;
}

.loader {
  width: 60px;

  height: 60px;

  border-radius: 50%;

  border: 5px solid #e2e8f0;

  border-top: 5px solid var(--primary);

  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

/* Floating Animation */

.float {
  animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }
}

/*==================================================
 NAVBAR
==================================================*/

#mainNavbar {
  padding: 18px 0;

  transition: 0.35s;

  background: transparent;

  z-index: 9999;
}

#mainNavbar.scrolled {
  background: rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(20px);

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);

  padding: 12px 0;
}

.navbar-brand img {
  transition: 0.3s;
}

.nav-link {
  position: relative;

  margin: 0 10px;

  font-weight: 600;

  color: #0f172a !important;
}

.nav-link::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -6px;

  height: 2px;

  width: 0;

  background: #2563eb;

  transition: 0.3s;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.dropdown-menu {
  padding: 15px;

  min-width: 250px;
}

.dropdown-item {
  padding: 12px 18px;

  border-radius: 10px;

  font-weight: 500;
}

.dropdown-item:hover {
  background: #eff6ff;

  color: #2563eb;
}

.navbar-toggler {
  outline: none;
}

@media (max-width: 991px) {
  #mainNavbar {
    background: #fff;
  }

  .nav-link {
    padding: 15px 0;
  }
}

/*==========================================
 HERO SECTION
==========================================*/

.hero-section {
  position: relative;

  min-height: 100vh;

  display: flex;

  align-items: center;

  padding: 140px 0 80px;

  overflow: hidden;

  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 60%, #eef7ff 100%);
}

.hero-bg-grid {
  position: absolute;

  inset: 0;

  background-image: linear-gradient(
      rgba(37, 99, 235, 0.06) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(37, 99, 235, 0.06) 1px, transparent 1px);

  background-size: 60px 60px;

  z-index: 0;
}

.hero-glow {
  position: absolute;

  border-radius: 50%;

  filter: blur(120px);

  opacity: 0.45;
}

.hero-glow-1 {
  width: 400px;

  height: 400px;

  background: #3b82f6;

  left: -120px;

  top: 100px;
}

.hero-glow-2 {
  width: 450px;

  height: 450px;

  background: #06b6d4;

  right: -120px;

  bottom: 0;
}

.hero-section .container {
  position: relative;

  z-index: 5;
}

.hero-tag {
  display: inline-block;

  padding: 10px 18px;

  background: #eff6ff;

  color: #2563eb;

  border-radius: 40px;

  font-weight: 600;

  font-size: 15px;
}

.hero-title {
  font-size: clamp(52px, 7vw, 88px);

  font-weight: 800;

  line-height: 1.05;

  letter-spacing: -2px;

  margin: 25px 0;

  max-width: 700px;
}

.hero-description {
  font-size: 20px;

  line-height: 1.9;

  max-width: 560px;

  margin: 30px 0;
}

.hero-buttons {
  display: flex;

  flex-wrap: wrap;

  gap: 15px;
}

.hero-rating {
  font-size: 17px;

  font-weight: 600;

  color: #0f172a;
}

.hero-image {
  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;
}

.hero-image img {
  width: 100%;

  max-width: 720px;

  filter: drop-shadow(0 40px 80px rgba(37, 99, 235, 0.15));
}

.floating {
  animation: float 5s ease-in-out infinite;
}

/* HERO VISUAL */

.hero-visual {
  position: relative;

  height: 650px;

  display: flex;

  justify-content: center;

  align-items: center;
}

.hero-main-img {
  max-width: 620px;

  width: 100%;

  position: relative;

  z-index: 5;

  filter: drop-shadow(0 30px 60px rgba(37, 99, 235, 0.18));
}

.tech-stack {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;
}

.tech-stack span {
  padding: 10px 18px;

  background: #fff;

  border-radius: 40px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);

  font-weight: 600;

  font-size: 14px;
}

.floating-card {
  position: absolute;

  padding: 14px 22px;

  background: rgba(255, 255, 255, 0.85);

  backdrop-filter: blur(20px);

  border-radius: 18px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);

  font-weight: 700;

  animation: float 5s ease-in-out infinite;

  z-index: 10;
}

.card-ai {
  top: 40px;

  left: 20px;
}

.card-cloud {
  top: 80px;

  right: 0;

  animation-delay: 1s;
}

.card-devops {
  left: 0;

  bottom: 180px;

  animation-delay: 2s;
}

.card-security {
  right: 20px;

  bottom: 140px;

  animation-delay: 1.5s;
}

.card-mobile {
  left: 150px;

  bottom: 20px;

  animation-delay: 0.8s;
}

.floating-card {
  position: absolute;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 16px 22px;

  background: rgba(255, 255, 255, 0.82);

  backdrop-filter: blur(20px);

  border-radius: 20px;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);

  font-weight: 700;

  font-size: 15px;

  animation: float 5s ease-in-out infinite;

  z-index: 20;
}

.floating-card img {
  width: 28px;

  height: 28px;

  object-fit: contain;
}

.floating-card span {
  color: #0f172a;
}

/*=========================================
TECHNOLOGY
==========================================*/

.clients-section {
  padding: 90px 0;

  background: #fff;

  overflow: hidden;
}

.logo-slider {
  position: relative;

  overflow: hidden;

  margin-top: 40px;
}

.logo-track {
  display: flex;

  width: max-content;

  animation: marquee 30s linear infinite;
}

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

.logo-item {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 180px;

  height: 95px;

  margin: 0 14px;

  background: #fff;

  border-radius: 18px;

  border: 1px solid #eef2f7;

  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.05);

  transition: 0.35s;
}

.logo-item:hover {
  transform: translateY(-8px);

  box-shadow: 0 25px 60px rgba(37, 99, 235, 0.18);
}

.logo-item img {
  height: 52px;

  width: auto;

  filter: grayscale(100%);

  transition: 0.35s;
}

.logo-item:hover img {
  filter: none;

  transform: scale(1.08);
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

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

/*=========================================
SERVICES
==========================================*/

.services-section {
  padding: 120px 0;

  background: #f8fafc;
}

.service-card {
  position: relative;

  background: #fff;

  padding: 40px;

  border-radius: 24px;

  height: 100%;

  overflow: hidden;

  transition: 0.35s;

  border: 1px solid #edf2f7;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
}

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

  box-shadow: 0 35px 80px rgba(37, 99, 235, 0.15);
}

.service-card::before {
  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 5px;

  background: linear-gradient(90deg, #2563eb, #06b6d4);

  transform: scaleX(0);

  transition: 0.4s;
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-image {
  height: 140px;

  display: flex;

  justify-content: center;

  align-items: center;

  margin-bottom: 25px;
}

.service-image img {
  height: 120px;

  transition: 0.4s;
}

.service-card:hover img {
  transform: scale(1.08) rotate(3deg);
}

.service-icon {
  width: 62px;

  height: 62px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 18px;

  background: linear-gradient(135deg, #2563eb, #06b6d4);

  color: #fff;

  font-size: 28px;

  margin-bottom: 20px;
}

.service-card h4 {
  margin-bottom: 15px;
}

.service-card p {
  min-height: 95px;
}

.service-card a {
  font-weight: 700;

  color: #2563eb;
}

.service-card a i {
  margin-left: 6px;

  transition: 0.3s;
}

.service-card:hover a i {
  transform: translateX(6px);
}

#cursor-glow {
  position: fixed;

  left: 0;
  top: 0;

  width: 280px;
  height: 280px;

  pointer-events: none;

  border-radius: 50%;

  transform: translate(-50%, -50%);

  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.18) 0%,
    rgba(6, 182, 212, 0.1) 35%,
    rgba(124, 58, 237, 0.06) 60%,
    transparent 80%
  );

  filter: blur(45px);

  z-index: 0;

  opacity: 0.9;

  transition: left 0.08s linear, top 0.08s linear;
}

.spark {
  position: fixed;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  pointer-events: none;

  z-index: 99999;

  box-shadow: 0 0 12px currentColor;

  animation: spark 0.9s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes spark {
  0% {
    opacity: 1;

    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  100% {
    opacity: 0;

    transform: translate(var(--x), var(--y)) scale(0) rotate(360deg);
  }
}

/*=========================================
WHY NELAXA
=========================================*/

.why-section{

padding:120px 0;

background:#fff;

}

.why-card{

padding:40px;

height:100%;

background:#fff;

border-radius:24px;

box-shadow:0 20px 60px rgba(0,0,0,.05);

transition:.4s;

border:1px solid #eef2f7;

}

.why-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 80px rgba(37,99,235,.15);

}

.why-icon{

width:80px;

height:80px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

background:linear-gradient(135deg,#2563EB,#06B6D4);

color:#fff;

font-size:34px;

margin-bottom:25px;

}

.counter-box{

padding:45px;

border-radius:25px;

background:linear-gradient(135deg,#2563EB,#06B6D4);

color:#fff;

text-align:center;

}

.counter-box h2{

font-size:56px;

font-weight:800;

color:#fff;

margin-bottom:10px;

}

.counter-box p{

color:#fff;

margin:0;

}

/*=========================================
PROCESS
=========================================*/

.process-section{

padding:130px 0;

background:#F8FAFC;

position:relative;

overflow:hidden;

}

.timeline{

position:relative;

max-width:1200px;

margin:auto;

padding:60px 0;

}

.timeline::before{

content:"";

position:absolute;

left:50%;

top:0;

width:4px;

height:100%;

background:linear-gradient(#2563EB,#06B6D4);

transform:translateX(-50%);

border-radius:20px;

}

.timeline-item{

position:relative;

width:50%;

padding:20px 50px;

}

.timeline-item.left{

left:0;

}

.timeline-item.right{

left:50%;

}

.timeline-card{

background:#fff;

padding:35px;

border-radius:24px;

box-shadow:0 20px 60px rgba(0,0,0,.06);

transition:.35s;

position:relative;

overflow:hidden;

border:1px solid #eef2f7;

}

.timeline-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 80px rgba(37,99,235,.16);

}

.timeline-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(90deg,#2563EB,#06B6D4);

}

.step-number{

position:absolute;

top:-18px;

right:25px;

font-size:54px;

font-weight:800;

color:#dbeafe;

}

.process-image{

height:170px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:20px;

}

.process-image img{

height:150px;

transition:.35s;

}

.timeline-card:hover img{

transform:scale(1.08);

}

.process-icon{

width:70px;

height:70px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#2563EB,#06B6D4);

color:#fff;

font-size:30px;

margin-bottom:20px;

}

.timeline-card h3{

margin-bottom:15px;

}

@media(max-width:992px){

.timeline::before{

left:25px;

}

.timeline-item{

width:100%;

left:0!important;

padding-left:70px;

padding-right:0;

margin-bottom:40px;

}

}

/*==================================================
INDUSTRIES
NELAXA PREMIUM CARDS
==================================================*/

.industries-section{

padding:140px 0;

position:relative;

overflow:hidden;

background:
linear-gradient(180deg,#ffffff,#f8fbff,#ffffff);

}

.industries-section::before{

content:"";

position:absolute;

width:650px;

height:650px;

left:-250px;

top:-200px;

border-radius:50%;

background:rgba(37,99,235,.08);

filter:blur(140px);

}

.industries-section::after{

content:"";

position:absolute;

width:650px;

height:650px;

right:-250px;

bottom:-250px;

border-radius:50%;

background:rgba(6,182,212,.10);

filter:blur(140px);

}

.industry-card{

position:relative;

overflow:hidden;

background:rgba(255,255,255,.82);

backdrop-filter:blur(20px);

border-radius:28px;

padding:40px 30px;

height:100%;

border:1px solid rgba(255,255,255,.65);

box-shadow:

0 20px 50px rgba(15,23,42,.08);

transition:.45s;

cursor:pointer;

}

.industry-card:hover{

transform:

translateY(-12px)

rotateX(3deg)

rotateY(-3deg);

box-shadow:

0 40px 80px rgba(37,99,235,.18);

}

.industry-gradient{

position:absolute;

width:220px;

height:220px;

right:-80px;

top:-80px;

border-radius:50%;

filter:blur(40px);

opacity:.35;

transition:.5s;

}

.industry-card:hover .industry-gradient{

transform:scale(1.4);

opacity:.55;

}

.primary{

background:#2563EB;

}

.cyan{

background:#06B6D4;

}

.purple{

background:#7C3AED;

}

.orange{

background:#F97316;

}

.green{

background:#22C55E;

}

.pink{

background:#EC4899;

}

.blue{

background:#0EA5E9;

}

.indigo{

background:#4F46E5;

}

.industry-image{

width:95px;

height:95px;

margin-bottom:28px;

transition:.45s;

position:relative;

z-index:2;

}

.industry-card:hover .industry-image{

transform:

translateY(-8px)

scale(1.08);

}

.industry-card h4{

font-size:26px;

margin-bottom:16px;

position:relative;

z-index:2;

}

.industry-card p{

font-size:16px;

line-height:1.8;

margin-bottom:28px;

position:relative;

z-index:2;

}

.industry-card a{

display:inline-flex;

align-items:center;

gap:8px;

font-weight:700;

color:#2563EB;

position:relative;

z-index:2;

}

.industry-card a i{

transition:.35s;

}

.industry-card:hover a i{

transform:translateX(6px);

}

.industry-shine{

position:absolute;

top:-120%;

left:-40%;

width:70px;

height:220%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.75),

transparent

);

transform:rotate(25deg);

transition:.8s;

}

.industry-card:hover .industry-shine{

left:150%;

}

.industry-card::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:4px;

background:

linear-gradient(

90deg,

#2563EB,

#06B6D4,

#7C3AED

);

transform:scaleX(0);

transition:.4s;

transform-origin:left;

}

.industry-card:hover::after{

transform:scaleX(1);

}

/* floating */

.industry-image{

animation:industryFloat 6s ease-in-out infinite;

}

@keyframes industryFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

/* responsive */

@media(max-width:992px){

.industry-card{

padding:35px 24px;

}

}

@media(max-width:768px){

.industries-section{

padding:90px 0;

}

.industry-card{

text-align:center;

}

.industry-image{

margin:auto auto 25px;

}

.industry-card a{

justify-content:center;

}

}

/*==================================================
CARD GLOW
==================================================*/

.industry-card{

transform-style:preserve-3d;

overflow:hidden;

}

.mouse-glow{

position:absolute;

width:220px;

height:220px;

background:

radial-gradient(circle,

rgba(37,99,235,.25),

transparent 70%);

border-radius:50%;

pointer-events:none;

transform:translate(-50%,-50%);

transition:.08s;

mix-blend-mode:screen;

z-index:1;

}

/*=======================================*/

.particle{

position:absolute;

width:5px;

height:5px;

border-radius:50%;

background:#06B6D4;

opacity:.55;

animation:particleFloat 6s linear infinite;

pointer-events:none;

}

.particle:nth-child(odd){

background:#2563EB;

}

.particle:nth-child(3n){

background:#7C3AED;

}

@keyframes particleFloat{

0%{

transform:

translateY(20px)

scale(.4);

opacity:0;

}

30%{

opacity:.7;

}

70%{

opacity:.7;

}

100%{

transform:

translateY(-90px)

scale(1.2);

opacity:0;

}

}

/*=======================================*/

.industry-card:hover .industry-image{

filter:

drop-shadow(0 15px 35px rgba(37,99,235,.35));

}

.industry-card:hover h4{

color:#2563EB;

}

.industry-card:hover{

border-color:#2563EB33;

}

/*=======================================*/

.industry-card::before{

content:"";

position:absolute;

inset:-2px;

padding:2px;

border-radius:28px;

background:

linear-gradient(

130deg,

#2563EB,

#06B6D4,

#7C3AED,

#2563EB

);

background-size:300%;

animation:borderGradient 8s linear infinite;

mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

opacity:0;

transition:.35s;

}

.industry-card:hover::before{

opacity:1;

}

@keyframes borderGradient{

100%{

background-position:300%;

}
}

/*==================================================
FEATURED SOLUTIONS
==================================================*/

.solutions-section{

padding:140px 0;

position:relative;

overflow:hidden;

background:
linear-gradient(180deg,#fff,#f8fbff,#fff);

}

/* Background Glow */

.solutions-section::before{

content:"";

position:absolute;

left:-250px;

top:-180px;

width:550px;

height:550px;

background:#2563EB22;

border-radius:50%;

filter:blur(140px);

}

.solutions-section::after{

content:"";

position:absolute;

right:-220px;

bottom:-180px;

width:500px;

height:500px;

background:#06B6D422;

border-radius:50%;

filter:blur(130px);

}

/* Row */

.solution-row{

padding:90px 0;

position:relative;

}

/*--------------------------------*/

.solution-image{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

/* Glow */

.solution-glow{

position:absolute;

width:360px;

height:360px;

border-radius:50%;

filter:blur(90px);

opacity:.18;

animation:solutionGlow 7s infinite alternate;

}

@keyframes solutionGlow{

100%{

transform:

scale(1.25)

rotate(30deg);

}

}

/* Dashboard */

.solution-dashboard{

position:relative;

max-width:560px;

border-radius:28px;

background:#fff;

box-shadow:

0 40px 80px rgba(15,23,42,.12);

transition:.45s;

z-index:2;

}

.solution-dashboard:hover{

transform:

translateY(-12px)

rotateY(-6deg);

}

/*--------------------------------*/

.solution-content{

padding:20px;

}

.solution-icon{

width:80px;

height:80px;

border-radius:22px;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:#fff;

margin-bottom:30px;

box-shadow:

0 25px 60px rgba(0,0,0,.12);

}

.solution-content h3{

font-size:42px;

margin-bottom:20px;

}

.solution-content p{

font-size:18px;

margin-bottom:30px;

line-height:1.9;

}

.solution-list{

padding:0;

list-style:none;

margin-bottom:35px;

}

.solution-list li{

margin-bottom:15px;

font-size:17px;

display:flex;

align-items:center;

gap:12px;

}

.solution-list i{

color:#22C55E;

font-size:20px;

}

/*--------------------------------*/

.solution-content .btn-main{

margin-right:15px;

}

/*--------------------------------*/

@media(max-width:991px){

.solution-row{

padding:60px 0;

}

.solution-content{

margin-top:40px;

text-align:center;

}

.solution-icon{

margin:auto auto 30px;

}

.solution-list li{

justify-content:center;

}

.solution-dashboard{

max-width:100%;

}

}

/*==================================
Solution Entrance
===================================*/

.solution-row{

opacity:0;

transform:translateY(80px);

transition:

1s cubic-bezier(.2,.8,.2,1);

}

.solution-row.solution-visible{

opacity:1;

transform:translateY(0);

}

/*==================================*/

.solution-dashboard{

will-change:transform;

transform-style:preserve-3d;

}

/*==================================*/

.solution-dashboard::after{

content:"";

position:absolute;

left:-60%;

top:-30%;

width:80px;

height:180%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.55),

transparent

);

transform:rotate(25deg);

transition:.9s;

}

.solution-dashboard:hover::after{

left:160%;

}

/*==================================================
TESTIMONIALS
==================================================*/

.testimonials-section{

position:relative;

padding:140px 0;

overflow:hidden;

background:
linear-gradient(180deg,#ffffff,#f8fbff,#ffffff);

}

/* Background */

.testimonials-section::before{

content:"";

position:absolute;

width:650px;

height:650px;

left:-250px;

top:-250px;

border-radius:50%;

background:rgba(37,99,235,.08);

filter:blur(150px);

}

.testimonials-section::after{

content:"";

position:absolute;

width:650px;

height:650px;

right:-250px;

bottom:-250px;

border-radius:50%;

background:rgba(6,182,212,.10);

filter:blur(150px);

}

/*==========================
TRUST STATS
===========================*/

.trust-card{

background:#fff;

border-radius:26px;

padding:35px;

box-shadow:

0 18px 45px rgba(15,23,42,.07);

transition:.35s;

height:100%;

position:relative;

overflow:hidden;

}

.trust-card::before{

content:"";

position:absolute;

left:-70px;

top:-70px;

width:160px;

height:160px;

border-radius:50%;

background:rgba(37,99,235,.07);

transition:.5s;

}

.trust-card:hover::before{

transform:scale(2);

}

.trust-card:hover{

transform:translateY(-8px);

box-shadow:

0 35px 70px rgba(37,99,235,.16);

}

.trust-card h2{

font-size:54px;

font-weight:800;

margin-bottom:8px;

background:linear-gradient(90deg,#2563EB,#06B6D4);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.trust-card p{

margin:0;

font-weight:600;

}

/*==========================
TESTIMONIAL CARD
===========================*/

.testimonial-card{

position:relative;

overflow:hidden;

height:100%;

padding:38px;

border-radius:28px;

background:rgba(255,255,255,.82);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.65);

box-shadow:

0 20px 50px rgba(15,23,42,.08);

transition:.4s;

}

.testimonial-card:hover{

transform:

translateY(-10px)

rotateX(3deg);

box-shadow:

0 40px 80px rgba(37,99,235,.18);

}

.testimonial-card::before{

content:"";

position:absolute;

left:-60%;

top:-60%;

width:240px;

height:240px;

border-radius:50%;

background:

linear-gradient(

135deg,

rgba(37,99,235,.08),

rgba(6,182,212,.08)

);

transition:.5s;

}

.testimonial-card:hover::before{

transform:scale(1.7);

}

.stars{

display:flex;

gap:6px;

margin-bottom:22px;

color:#FBBF24;

font-size:18px;

}

.testimonial-text{

font-size:17px;

line-height:1.9;

min-height:140px;

margin-bottom:30px;

}

.testimonial-user{

display:flex;

align-items:center;

gap:18px;

}

.avatar{

width:64px;

height:64px;

border-radius:50%;

background:

linear-gradient(135deg,#2563EB,#06B6D4);

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

font-weight:700;

color:#fff;

flex-shrink:0;

box-shadow:

0 18px 40px rgba(37,99,235,.28);

}

.testimonial-user h5{

margin:0;

font-size:20px;

}

.testimonial-user span{

color:#64748B;

font-size:15px;

}

/*==========================
LOGO MARQUEE
===========================*/

.logo-marquee{

position:relative;

overflow:hidden;

padding:35px 0;

mask-image:

linear-gradient(

90deg,

transparent,

#fff 10%,

#fff 90%,

transparent

);

}

.logo-track{

display:flex;

align-items:center;

gap:80px;

width:max-content;

animation:logoScroll 28s linear infinite;

}

.logo-track img{

height:42px;

opacity:.65;

filter:grayscale(100%);

transition:.35s;

}

.logo-track img:hover{

opacity:1;

filter:none;

transform:scale(1.12);

}

@keyframes logoScroll{

100%{

transform:translateX(-50%);

}

}

/*==========================
FLOATING SHINE
===========================*/

.testimonial-card::after{

content:"";

position:absolute;

left:-80%;

top:-40%;

width:80px;

height:220%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.65),

transparent

);

transform:rotate(25deg);

transition:.9s;

}

.testimonial-card:hover::after{

left:170%;

}

/*==========================
RESPONSIVE
===========================*/

@media(max-width:991px){

.testimonials-section{

padding:90px 0;

}

.testimonial-card{

padding:30px;

}

.testimonial-text{

min-height:auto;

}

.logo-track{

gap:45px;

}

}

@media(max-width:768px){

.trust-card h2{

font-size:42px;

}

.avatar{

width:56px;

height:56px;

font-size:20px;

}

.logo-track img{

height:34px;

}

}

/*==================================================
 FAQ SECTION
==================================================*/

.faq-section{

padding:140px 0;

position:relative;

overflow:hidden;

background:
linear-gradient(180deg,#fff,#f8fbff,#fff);

}

/* Background */

.faq-section::before{

content:"";

position:absolute;

left:-250px;

top:-220px;

width:600px;

height:600px;

background:rgba(37,99,235,.08);

border-radius:50%;

filter:blur(150px);

}

.faq-section::after{

content:"";

position:absolute;

right:-220px;

bottom:-220px;

width:520px;

height:520px;

background:rgba(6,182,212,.10);

border-radius:50%;

filter:blur(150px);

}

/*======================================*/

.faq-illustration{

margin-top:60px;

animation:faqFloat 6s ease-in-out infinite;

}

@keyframes faqFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

/*======================================*/

.faq-accordion{

margin-top:20px;

}

.accordion-item{

border:none;

margin-bottom:20px;

border-radius:22px!important;

overflow:hidden;

background:#fff;

box-shadow:

0 15px 40px rgba(15,23,42,.06);

transition:.35s;

}

.accordion-item:hover{

transform:translateY(-4px);

box-shadow:

0 25px 60px rgba(37,99,235,.15);

}

.accordion-button{

padding:28px 30px;

font-size:20px;

font-weight:700;

background:#fff;

color:#0F172A;

box-shadow:none!important;

}

.accordion-button:not(.collapsed){

background:

linear-gradient(135deg,#2563EB,#06B6D4);

color:#fff;

}

.accordion-body{

padding:28px 30px;

font-size:17px;

line-height:1.9;

color:#64748B;

}

/* Remove Bootstrap Icon */

.accordion-button::after{

display:none;

}

/* Custom Icon */

.accordion-button::before{

content:"+";

margin-right:18px;

width:34px;

height:34px;

border-radius:50%;

background:#EFF6FF;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

font-weight:700;

color:#2563EB;

transition:.35s;

flex-shrink:0;

}

.accordion-button:not(.collapsed)::before{

content:"−";

background:#fff;

color:#2563EB;

transform:rotate(180deg);

}

/*======================================*/

@media(max-width:991px){

.faq-section{

padding:90px 0;

}

.faq-illustration{

margin-bottom:50px;

text-align:center;

}

}

@media(max-width:768px){

.accordion-button{

font-size:17px;

padding:22px;

}

.accordion-body{

padding:22px;

}

}

/*==================================
FAQ Reveal
===================================*/

.accordion-item{

opacity:0;

transform:translateY(40px);

transition:

all .8s cubic-bezier(.2,.8,.2,1);

}

.accordion-item.faq-visible{

opacity:1;

transform:translateY(0);

}

/*==================================================
CONTACT SECTION
==================================================*/

.contact-section{

position:relative;

padding:140px 0;

overflow:hidden;

background:
linear-gradient(180deg,#ffffff,#f8fbff,#ffffff);

}

.contact-section::before{

content:"";

position:absolute;

left:-250px;

top:-200px;

width:600px;

height:600px;

border-radius:50%;

background:rgba(37,99,235,.08);

filter:blur(150px);

}

.contact-section::after{

content:"";

position:absolute;

right:-220px;

bottom:-200px;

width:520px;

height:520px;

border-radius:50%;

background:rgba(6,182,212,.10);

filter:blur(150px);

}

/*===================================*/

.contact-card{

position:relative;

overflow:hidden;

padding:50px;

background:rgba(255,255,255,.82);

backdrop-filter:blur(22px);

border-radius:30px;

border:1px solid rgba(255,255,255,.65);

box-shadow:

0 25px 70px rgba(15,23,42,.08);

}

.contact-glow{

position:absolute;

width:320px;

height:320px;

right:-120px;

top:-120px;

border-radius:50%;

background:linear-gradient(#2563EB,#06B6D4);

opacity:.15;

filter:blur(80px);

animation:contactGlow 8s infinite alternate;

}

@keyframes contactGlow{

100%{

transform:scale(1.4) rotate(25deg);

}

}

/*===================================*/

.form-control,

.form-select{

height:58px;

border-radius:16px;

border:1px solid #E2E8F0;

padding:15px 18px;

font-size:16px;

box-shadow:none;

transition:.35s;

}

textarea.form-control{

height:auto;

min-height:170px;

resize:none;

padding-top:18px;

}

.form-control:focus,

.form-select:focus{

border-color:#2563EB;

box-shadow:

0 0 0 5px rgba(37,99,235,.08);

}

.form-control::placeholder{

color:#94A3B8;

}

/*===================================*/

.contact-feature{

display:flex;

align-items:flex-start;

gap:18px;

margin-bottom:28px;

}

.feature-circle{

width:64px;

height:64px;

border-radius:18px;

background:linear-gradient(135deg,#2563EB,#06B6D4);

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

color:#fff;

flex-shrink:0;

box-shadow:

0 18px 40px rgba(37,99,235,.25);

}

.contact-feature h5{

margin-bottom:6px;

font-size:20px;

}

.contact-feature p{

margin:0;

}

/*===================================*/

.mini-contact-card{

padding:25px;

background:#fff;

border-radius:20px;

text-align:center;

box-shadow:

0 18px 45px rgba(15,23,42,.06);

transition:.35s;

height:100%;

}

.mini-contact-card:hover{

transform:translateY(-8px);

box-shadow:

0 30px 70px rgba(37,99,235,.16);

}

.mini-contact-card i{

font-size:28px;

margin-bottom:16px;

color:#2563EB;

}

.mini-contact-card h6{

font-size:18px;

margin-bottom:8px;

}

.mini-contact-card p{

margin:0;

font-size:15px;

}

/*===================================*/

.contact-bottom-card{

margin-top:80px;

padding:45px 55px;

border-radius:30px;

background:

linear-gradient(135deg,#2563EB,#06B6D4);

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:25px;

color:#fff;

box-shadow:

0 35px 80px rgba(37,99,235,.30);

}

.contact-bottom-card h3{

color:#fff;

margin-bottom:10px;

font-size:36px;

}

.contact-bottom-card p{

color:#EAF6FF;

margin:0;

}

.contact-bottom-card .btn-main{

background:#fff;

color:#2563EB;

box-shadow:none;

}

.contact-bottom-card .btn-main:hover{

transform:translateY(-5px);

}

/*===================================*/

@media(max-width:991px){

.contact-section{

padding:90px 0;

}

.contact-card{

padding:35px;

margin-top:50px;

}

.contact-bottom-card{

padding:35px;

text-align:center;

justify-content:center;

}

}

@media(max-width:768px){

.contact-card{

padding:28px;

}

.contact-bottom-card h3{

font-size:28px;

}

.contact-bottom-card{

padding:30px;

}

.feature-circle{

width:56px;

height:56px;

font-size:20px;

}

.mini-contact-card{

padding:20px;

}

}

/*=====================================
CONTACT JS SUPPORT
======================================*/

.contact-section{

opacity:0;

transform:translateY(60px);

transition:1s cubic-bezier(.2,.8,.2,1);

}

.contact-section.contact-visible{

opacity:1;

transform:translateY(0);

}

.field-active{

position:relative;

}

.field-active::after{

content:"";

position:absolute;

left:12px;

right:12px;

bottom:-6px;

height:3px;

border-radius:10px;

background:linear-gradient(90deg,#2563EB,#06B6D4);

animation:fieldGlow .35s;

}

@keyframes fieldGlow{

from{

transform:scaleX(0);

}

to{

transform:scaleX(1);

}

}

/* Ripple */

.btn-main{

position:relative;

overflow:hidden;

}

.btn-ripple{

position:absolute;

width:20px;

height:20px;

border-radius:50%;

background:rgba(255,255,255,.45);

transform:translate(-50%,-50%) scale(0);

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:translate(-50%,-50%) scale(18);

opacity:0;

}

}

/* Toast */

.contact-toast{

position:fixed;

right:30px;

bottom:30px;

background:#fff;

padding:18px 24px;

border-radius:18px;

display:flex;

align-items:center;

gap:15px;

box-shadow:0 25px 60px rgba(0,0,0,.15);

transform:translateY(120px);

opacity:0;

transition:.35s;

z-index:99999;

max-width:340px;

}

.contact-toast.show{

opacity:1;

transform:translateY(0);

}

.contact-toast i{

font-size:34px;

color:#22C55E;

}

@media(max-width:768px){

.contact-toast{

left:20px;

right:20px;

bottom:20px;

max-width:none;

}

}

/*==================================================
FOOTER
==================================================*/

.footer-section{

position:relative;

overflow:hidden;

background:
linear-gradient(
135deg,
#07142B 0%,
#0B1E3A 40%,
#132F63 100%
);

padding-top:0;

color:#CBD5E1;

}

/* Background */

.footer-section::before{

content:"";

position:absolute;

left:-250px;
top:-250px;

width:600px;
height:600px;

border-radius:50%;

background:rgba(37,99,235,.12);

filter:blur(160px);

}

.footer-section::after{

content:"";

position:absolute;

right:-220px;
bottom:-250px;

width:500px;
height:500px;

border-radius:50%;

background:rgba(6,182,212,.10);

filter:blur(150px);

}

/*======================================
CTA
======================================*/

.footer-cta{

padding:70px 0;

background:

linear-gradient(
135deg,
#2563EB,
#06B6D4
);

position:relative;

overflow:hidden;

}

.footer-cta::before{

content:"";

position:absolute;

right:-100px;
top:-100px;

width:300px;
height:300px;

border-radius:50%;

background:rgba(255,255,255,.08);

}

.footer-cta h2{

font-size:44px;

font-weight:800;

}

.footer-cta .btn{

font-weight:700;

padding:18px 40px;

transition:.35s;

}

.footer-cta .btn:hover{

transform:translateY(-5px);

}

/*====================================*/

.footer-section>.container{

position:relative;

z-index:5;

padding-top:90px;

}

/*====================================*/

.footer-section p{

color:#94A3B8;

line-height:1.9;

}

.footer-section h5{

color:#fff;

margin-bottom:25px;

font-size:22px;

}

/*======================================
Links
======================================*/

.footer-links{

list-style:none;

padding:0;

margin:0;

}

.footer-links li{

margin-bottom:14px;

}

.footer-links a{

color:#94A3B8;

transition:.35s;

display:inline-flex;

align-items:center;

}

.footer-links a:hover{

color:#fff;

padding-left:8px;

}

/*======================================
Contact
======================================*/

.footer-contact{

list-style:none;

padding:0;

margin:0;

}

.footer-contact li{

display:flex;

align-items:flex-start;

gap:14px;

margin-bottom:18px;

color:#CBD5E1;

}

.footer-contact i{

color:#06B6D4;

font-size:18px;

margin-top:3px;

}

/*======================================
Social
======================================*/

.footer-social{

display:flex;

gap:15px;

}

.footer-social a{

width:48px;

height:48px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:rgba(255,255,255,.06);

color:#fff;

transition:.35s;

font-size:18px;

}

.footer-social a:hover{

background:#2563EB;

transform:translateY(-6px);

}

/*======================================
Newsletter
======================================*/

.newsletter h6{

color:#fff;

margin-bottom:15px;

}

.newsletter .form-control{

background:rgba(255,255,255,.08);

border:none;

color:#fff;

height:52px;

}

.newsletter .form-control::placeholder{

color:#CBD5E1;

}

.newsletter .form-control:focus{

background:rgba(255,255,255,.12);

color:#fff;

box-shadow:none;

}

.newsletter .btn{

width:60px;

}

/*======================================
Tech
======================================*/

.footer-tech{

display:flex;

flex-wrap:wrap;

gap:15px;

justify-content:center;

padding:70px 0 50px;

border-top:1px solid rgba(255,255,255,.08);

margin-top:70px;

}

.footer-tech span{

padding:10px 18px;

background:rgba(255,255,255,.06);

border-radius:30px;

color:#fff;

font-size:14px;

font-weight:600;

transition:.35s;

}

.footer-tech span:hover{

background:#2563EB;

transform:translateY(-4px);

}

/*======================================
Bottom
======================================*/

.footer-bottom{

border-top:1px solid rgba(255,255,255,.08);

padding:30px 0;

font-size:15px;

color:#94A3B8;

}

.footer-bottom a{

color:#CBD5E1;

transition:.3s;

}

.footer-bottom a:hover{

color:#fff;

}

/*======================================
Back To Top
======================================*/

.back-to-top{

position:fixed;

right:35px;

bottom:35px;

width:58px;

height:58px;

border:none;

border-radius:50%;

background:

linear-gradient(
135deg,
#2563EB,
#06B6D4
);

color:#fff;

font-size:22px;

cursor:pointer;

display:flex;

justify-content:center;

align-items:center;

box-shadow:

0 20px 50px rgba(37,99,235,.35);

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:.35s;

z-index:9999;

}

.back-to-top.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.back-to-top:hover{

transform:translateY(-6px);

}

/*======================================
Responsive
======================================*/

@media(max-width:991px){

.footer-cta{

text-align:center;

}

.footer-cta h2{

font-size:34px;

}

.footer-section>.container{

padding-top:70px;

}

.footer-bottom{

text-align:center;

}

}

@media(max-width:768px){

.footer-social{

justify-content:center;

}

.footer-tech{

gap:10px;

}

.footer-tech span{

font-size:13px;

padding:8px 14px;

}

.back-to-top{

width:50px;

height:50px;

right:20px;

bottom:20px;

}

}