.about-section{
  position:relative;
  padding:20px 0;
  min-height:100vh;
  overflow:hidden;
  background:transparent;
 }

 
 .section-divider__svg{
  display:block;
  width:100%;
  height:100%;
  transform:scaleY(-1);
 }

 .divider-layer{
  transform-origin:center;

 }

 .divider-layer--back{
  fill:rgba(30,60,114,.18);
 }

 .divider-layer--front{
  fill:url(#dividerGradientHero);
  opacity:.95;
 }

 @keyframes dividerFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,6px,0)}
 }

 .about-section::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 18% 12%, rgba(100,181,246,.20), transparent 55%),
    radial-gradient(circle at 86% 82%, rgba(42,82,152,.18), transparent 60%);
  opacity:.95;
  pointer-events:none;
 }

 .about-section::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(42,82,152,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,82,152,.055) 1px, transparent 1px);
  background-size:80px 80px;
  opacity:.40;
  pointer-events:none;
  mix-blend-mode:multiply;
 }
 
 .about-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:50px;
  align-items:start;
 }
 
 .about-main{
  position:relative;
 }
 
 .about-heading{
  position:relative;
  padding:34px 34px 28px;
  border-radius:22px;
  background:linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 24px 70px rgba(10,25,49,.12);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
 }
 
 .about-heading::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(42,82,152,.35), rgba(100,181,246,.30), rgba(76,175,80,.18));
  opacity:.25;
  z-index:-1;
  filter:blur(18px);
 }
 
 .about-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.55);
  color:var(--secondary-blue);
  font-weight:800;
  font-size:.92rem;
  letter-spacing:.2px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
 }
 
 .about-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--secondary-blue), var(--accent-blue));
  box-shadow:0 0 14px rgba(100,181,246,.55);
 }
 
 .about-heading h2{
  margin:18px 0 10px;
  font-size:2.55rem;
  line-height:1.15;
  color:var(--dark-blue);
  font-weight:900;
  letter-spacing:-.2px;
 }
 
 .about-heading h2::after{
  content:"";
  display:block;
  width:76px;
  height:4px;
  margin-top:12px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--secondary-blue), var(--accent-blue));
  box-shadow:0 10px 25px rgba(100,181,246,.28);
 }
 
 .about-lead{
  margin-top:16px;
  color:rgba(52,58,64,.86);
  font-size:1.06rem;
  line-height:2.05;
  font-weight:500;
 }
 
 .about-cards{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
 }
 
 .about-card{
  position:relative;
  padding:18px 18px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 22px 55px rgba(10,25,49,.10);
  overflow:hidden;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:start;
  transform:translateZ(0);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
 }
 
 .about-card::before{
  content:"";
  position:absolute;
  inset:-40% -40% auto auto;
  width:200px;
  height:200px;
  background:radial-gradient(circle, rgba(100,181,246,.35), transparent 65%);
  transform:translate3d(30px,-30px,0);
  opacity:.65;
  pointer-events:none;
 }
 
 .about-card:hover{
  transform:translateY(-7px);
  box-shadow:0 32px 75px rgba(10,25,49,.14);
  border-color:rgba(100,181,246,.38);
 }
 
 .about-card-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(42,82,152,.95), rgba(100,181,246,.95));
  color:#fff;
  box-shadow:0 12px 24px rgba(42,82,152,.22);
 }
 
 .about-card-body h3{
  margin:2px 0 6px;
  color:var(--dark-blue);
  font-size:1.15rem;
  font-weight:800;
 }
 
 .about-card-body p{
  margin:0;
  color:rgba(52,58,64,.80);
  line-height:1.9;
  font-size:.97rem;
 }
 
 .about-actions{
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
 }
 
 .about-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 22px;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(135deg, var(--secondary-blue), var(--accent-blue));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 16px 35px rgba(42,82,152,.25);
  transition:transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
 }
 
 .about-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-120%);
  transition:transform .7s cubic-bezier(.19,1,.22,1);
 }
 
 .about-btn::after{
  content:"\2190";
  font-weight:700;
  opacity:.95;
  position:relative;
 }
 
 .about-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 50px rgba(42,82,152,.32);
 }
 
 .about-btn:hover::before{
  transform:translateX(120%);
 }
 
 .about-metrics{
  display:flex;
  gap:14px;
  align-items:center;
 }
 
 .about-metric{
  padding:10px 14px;
  border-radius:16px;
  border-bottom: 3px solid #1e3c72;
  border-top: 3px dashed #1e3c72;
  border-left: 3px solid #1e3c72;
  background:rgba(255,255,255,.16);
  box-shadow:0 18px 45px rgba(10,25,49,.08);
  min-width:140px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
 }
 
 .metric-number{
  display:block;
  font-weight:900;
  color:var(--secondary-blue);
  font-size:1.15rem;
 }
 
 .metric-label{
  display:block;
  color:var(--text-light);
  font-size:.9rem;
 }
 
 .about-media{
  position:relative;
 }
 
 .about-media-frame{
  position:relative;
  border-radius:28px;
  padding:22px;
  background:linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.60);
  box-shadow:0 34px 95px rgba(10,25,49,.14);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  overflow:visible;
  isolation:isolate;
 }

 .about-mouse-blob{
  position:absolute;
  left:34px;
  bottom:26px;
  width:360px;
  height:360px;
  transform:rotate(-14deg);
  opacity:.22;
  filter:drop-shadow(0 26px 75px rgba(30,60,114,.18));
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:0;
 }

 .about-media-frame::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  background:
    radial-gradient(circle at 18% 12%, rgba(30,60,114,.22), transparent 58%),
    radial-gradient(circle at 86% 82%, rgba(42,82,152,.18), transparent 62%);
  opacity:.9;
  pointer-events:none;
  z-index:0;
 }

 .about-media-frame::after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:22px;
  background:linear-gradient(135deg, rgba(10,25,49,.94), rgba(30,60,114,.90));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  pointer-events:none;
  z-index:1;
 }
 
 .about-media-glow{
  position:absolute;
  inset:-60px;
  background:radial-gradient(circle at 28% 12%, rgba(30,60,114,.35), transparent 55%),
             radial-gradient(circle at 78% 88%, rgba(42,82,152,.28), transparent 60%);
  filter:blur(26px);
  opacity:.85;
  animation:aboutGlow 8s ease-in-out infinite;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:0;
 }
 
 @keyframes aboutGlow{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(10px,-12px,0) scale(1.03)}
 }
 
 .about-images{
  position:relative;
  min-height:420px;
  z-index:2;
  isolation:isolate;
 }

 .about-images::before{
  content:"";
  position:absolute;
  inset:22px;
  clip-path: polygon(0% 15%, 15% 0%, 100% 0%, 100% 85%, 85% 100%, 0% 100%);
  background:linear-gradient(135deg, rgba(42,82,152,.08), rgba(100,181,246,.05));
  opacity:.65;
  pointer-events:none;
 }

 .about-images::after{
  content:"";
  position:absolute;
  inset:32px;
  clip-path: polygon(0% 10%, 10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%);
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:.45;
  pointer-events:none;
  display:block;
 }
 .about-images img{
  position:absolute;
  object-fit:cover;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.22,1,.36,1), box-shadow .8s ease, clip-path .6s ease;
  z-index:2;
 }
 
 .about-images img:nth-child(1){
  inset:32px 28px 32px 28px;
  width:calc(100% - 56px);
  height:calc(100% - 64px);
  clip-path: polygon(0% 8%, 8% 0%, 100% 0%, 100% 92%, 92% 100%, 0% 100%);
  box-shadow:0 25px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  mix-blend-mode:multiply;
  opacity:.85;
  filter:contrast(1.1) saturate(1.1);
  z-index:1;
 }
 
 .about-images img:nth-child(2){
  right:-40px;
  top:-40px;
  width:240px;
  height:240px;
  padding:20px;
  background:rgba(255,255,255,.95);
  object-fit:contain;
  clip-path: polygon(20% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 20%);
  border:1px solid rgba(30,60,114,.14);
  box-shadow:0 35px 100px rgba(10,25,49,.3), inset 0 1px 0 rgba(255,255,255,.2);
  transform:rotate(12deg);
  mix-blend-mode:normal;
  z-index:3;
 }

 .about-images img:nth-child(3){
  left:-35px;
  bottom:-35px;
  width:280px;
  height:200px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 100%, 0% 100%);
  background:rgba(255,255,255,.95);
  border:1px solid rgba(30,60,114,.14);
  box-shadow:0 40px 120px rgba(10,25,49,.3), inset 0 1px 0 rgba(255,255,255,.15);
  transform:rotate(-10deg);
  z-index:2;
  mix-blend-mode:screen;
  filter:saturate(1.05) contrast(1.05);
  animation:floatImage 6s ease-in-out infinite;
 }

@keyframes floatImage{
  0%,100%{transform:rotate(-8deg) translateY(0)}
  50%{transform:rotate(-6deg) translateY(-8px)}
}

 .about-media-frame:hover .about-mouse-blob{
  opacity:.32;
  transform:rotate(-10deg) translateY(-6px);
  filter:drop-shadow(0 34px 95px rgba(30,60,114,.22));
 }

 @media (max-width: 992px){
  .about-mouse-blob{left:24px;bottom:22px;width:300px;height:300px;}
 }

 @media (max-width: 576px){
  .about-mouse-blob{left:18px;bottom:18px;width:240px;height:240px;opacity:.18;}
 }

 .about-images img:nth-child(2)::selection{
  background:transparent;
 }

 .about-images::after{
  display:block;
 }

 .about-media-frame:hover .about-images img:nth-child(1){
  transform:scale(1.02);
  box-shadow:0 35px 100px rgba(0,0,0,.45);
  clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 95%, 95% 100%, 0% 100%);
  mix-blend-mode:multiply;
  opacity:.8;
 }

 .about-media-frame:hover .about-images img:nth-child(2){
  transform:rotate(8deg) translateY(-15px) scale(1.05);
  box-shadow:0 50px 150px rgba(10,25,49,.35);
  clip-path: polygon(15% 0%, 100% 0%, 100% 85%, 85% 100%, 0% 100%, 0% 15%);
  mix-blend-mode:normal;
  z-index:4;
 }

 .about-media-frame:hover .about-images img:nth-child(3){
  transform:rotate(-7deg) translateY(-10px) scale(1.03);
  box-shadow:0 50px 150px rgba(10,25,49,.3);
  clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 70% 100%, 0% 100%);
  mix-blend-mode:screen;
  z-index:3;
 }

 .about-badge{
  position:absolute;
  bottom:18px;
  right:18px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(10,25,49,.62);
  border:1px solid rgba(255,255,255,.32);
  color:#fff;
  backdrop-filter:blur(10px);
  box-shadow:0 18px 55px rgba(10,25,49,.18);
  z-index:5;
 }
 
 .badge-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg, #1e3c72, #2a5298);
  box-shadow:0 0 14px rgba(42,82,152,.7);
  animation:aboutDot 2.4s ease-in-out infinite;
 }
 
 @keyframes aboutDot{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.35);opacity:.75}
 }
 
 .badge-text{
  font-weight:900;
  font-size:1rem;
  letter-spacing:.1px;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
 }
 
 .about-shapes{
  position:absolute;
  inset:-20px;
  pointer-events:none;
 }
 
 .about-shapes::before,
 .about-shapes::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(22px);
  opacity:.8;
  animation:aboutFloat 16s ease-in-out infinite;
 }
 
 .about-shapes::before{
  width:220px;
  height:220px;
  right:-60px;
  top:20px;
  background:radial-gradient(circle, rgba(100,181,246,.35), transparent 70%);
 }
 
 .about-shapes::after{
  width:180px;
  height:180px;
  left:-60px;
  bottom:40px;
  background:radial-gradient(circle, rgba(42,82,152,.30), transparent 70%);
  animation-delay:-6s;
 }
 
 @keyframes aboutFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(12px,-16px,0)}
 }
 
 @media (max-width: 992px){
  .about-grid{grid-template-columns:minmax(0,1fr);}
  .about-images{min-height:380px;}
  .about-images img:nth-child(1){inset:28px 22px 28px 22px;width:calc(100% - 44px);}
  .about-images img:nth-child(2){right:-30px;top:-30px;width:200px;height:200px;padding:18px;}
  .about-images img:nth-child(3){left:-25px;bottom:-25px;width:220px;height:160px;}
  
  /* Phone Frame Responsive */
  .phone-frame {
    max-width: 240px;
    height: 480px;
  }
  
  .phone-body {
    border-radius: 35px;
    padding: 6px;
  }
  
  .phone-screen {
    border-radius: 28px;
  }
  
  .screen-content {
    border-radius: 24px;
  }
  
  .screen-notch {
    width: 100px;
    height: 22px;
  }
  
  .play-button {
    width: 50px;
    height: 50px;
  }
  
  .play-button i {
    font-size: 18px;
  }
  
  .phone-home-button {
    width: 45px;
    height: 45px;
  }
  
  .home-button-sensor {
    width: 18px;
    height: 18px;
  }
}

 @media (max-width: 768px){
  .about-grid{grid-template-columns:minmax(0,1fr);}
  .about-images{min-height:350px;}
  .about-images img:nth-child(1){inset:25px 20px 25px 20px;width:calc(100% - 40px);height:calc(100% - 50px);}
  .about-images img:nth-child(2){right:-25px;top:-25px;width:180px;height:180px;padding:16px;transform:rotate(10deg);}
  .about-images img:nth-child(3){left:-20px;bottom:-20px;width:200px;height:140px;transform:rotate(-8deg);}
  .about-media-frame{padding:18px;}
  
  /* Phone Frame Tablet Responsive */
  .phone-frame {
    max-width: 200px;
    height: 400px;
  }
  
  .phone-body {
    border-radius: 30px;
    padding: 5px;
  }
  
  .phone-screen {
    border-radius: 24px;
  }
  
  .screen-content {
    border-radius: 20px;
  }
  
  .screen-notch {
    width: 80px;
    height: 18px;
  }
  
  .notch-camera {
    width: 6px;
    height: 6px;
  }
  
  .notch-speaker {
    width: 30px;
    height: 3px;
  }
  
  .play-button {
    width: 45px;
    height: 45px;
  }
  
  .play-button i {
    font-size: 16px;
  }
  
  .phone-home-button {
    width: 40px;
    height: 40px;
  }
  
  .home-button-sensor {
    width: 16px;
    height: 16px;
  }
  
  .phone-buttons {
    left: -2px;
  }
  
  .volume-up, .volume-down {
    width: 3px;
    height: 35px;
  }
  
  .power-button {
    right: -2px;
    width: 3px;
    height: 50px;
  }
}

 @media (max-width: 576px){
  .about-section{padding:70px 0;}
  .about-heading{padding:26px 18px 20px;}
  .about-heading h2{font-size:2rem;}
  .about-cards{grid-template-columns:minmax(0,1fr);}
  .about-metric{min-width:0;}
  .about-images{min-height:320px;}
  .about-images img:nth-child(1){inset:20px 15px 20px 15px;width:calc(100% - 30px);height:calc(100% - 40px);}
  .about-images img:nth-child(2){right:-20px;top:-20px;width:160px;height:160px;padding:15px;transform:rotate(8deg);}
  .about-images img:nth-child(3){display:none;}
  .about-badge{right:12px;bottom:12px;padding:9px 12px;}
  .badge-text{font-size:.95rem;}
  
  /* Phone Frame Mobile Responsive */
  .phone-frame {
    max-width: 180px;
    height: 360px;
  }
  
  .phone-body {
    border-radius: 25px;
    padding: 4px;
  }
  
  .phone-screen {
    border-radius: 20px;
  }
  
  .screen-content {
    border-radius: 16px;
  }
  
  .screen-notch {
    width: 70px;
    height: 15px;
  }
  
  .notch-camera {
    width: 5px;
    height: 5px;
  }
  
  .notch-speaker {
    width: 25px;
    height: 2px;
  }
  
  .play-button {
    width: 40px;
    height: 40px;
  }
  
  .play-button i {
    font-size: 14px;
  }
  
  .phone-home-button {
    width: 35px;
    height: 35px;
  }
  
  .home-button-sensor {
    width: 14px;
    height: 14px;
  }
  
  .phone-buttons {
    left: -1px;
  }
  
  .volume-up, .volume-down {
    width: 2px;
    height: 30px;
  }
  
  .power-button {
    right: -1px;
    width: 2px;
    height: 40px;
  }
}

 @media (max-width: 480px){
  .about-images{min-height:280px;}
  .about-images img:nth-child(1){inset:15px 12px 15px 12px;width:calc(100% - 24px);height:calc(100% - 30px);}
  .about-images img:nth-child(2){right:-15px;top:-15px;width:140px;height:140px;padding:12px;transform:rotate(6deg);}
  .about-media-frame{padding:15px;}
  .about-badge{right:8px;bottom:8px;padding:8px 10px;}
  .badge-text{font-size:.85rem;}
  
  /* Phone Frame Small Mobile Responsive */
  .phone-frame {
    max-width: 160px;
    height: 320px;
  }
  
  .phone-body {
    border-radius: 22px;
    padding: 3px;
  }
  
  .phone-screen {
    border-radius: 18px;
  }
  
  .screen-content {
    border-radius: 14px;
  }
  
  .screen-notch {
    width: 60px;
    height: 12px;
  }
  
  .notch-camera {
    width: 4px;
    height: 4px;
  }
  
  .notch-speaker {
    width: 20px;
    height: 2px;
  }
  
  .play-button {
    width: 35px;
    height: 35px;
  }
  
  .play-button i {
    font-size: 12px;
  }
  
  .phone-home-button {
    width: 30px;
    height: 30px;
  }
  
  .home-button-sensor {
    width: 12px;
    height: 12px;
  }
  
  .phone-buttons {
    left: -1px;
  }
  
  .volume-up, .volume-down {
    width: 2px;
    height: 25px;
  }
  
  .power-button {
    right: -1px;
    width: 2px;
    height: 35px;
  }
}


  


.solution-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  background: linear-gradient(135deg, #1e3c72, #2a5298) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: subtract;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: subtract;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 4;
}

.solution-item:hover::before {
  opacity: 0.8;
}

/* Additional Icon Hover Effects */
.solution-item:hover .solution-icon-wrapper {
  transform: scale(1.2) rotateY(180deg);
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.3),
    inset 0 0 30px rgba(255, 255, 255, 0.7);
}

.solution-item:hover .solution-name {
  transform: translateY(-3px);
  text-shadow: 0 4px 20px rgba(255, 255, 255, 0.6);
}

.solution-item:hover .solution-summary {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.solution-item:hover .solution-arrow {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.4),
    inset 0 0 25px rgba(255, 255, 255, 0.4);
}

.solution-item:hover .solution-arrow::before {
  left: 100%;
}

/* Active States */
.solution-item:active {
  transform: translateY(-10px) scale(1.01);
}

.solution-arrow:active {
  transform: translateY(-2px) scale(0.98);
}

/* Exceptional Border System */
.solution-item::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 32px;
  padding: 4px;
  background: conic-gradient(
    from 0deg at 50% 50%,
    #1e3c72 0deg,
    #2a5298 30deg,
    #1e3c72 60deg,
    #2a5298 90deg,
    #1e3c72 120deg,
    #2a5298 150deg,
    #1e3c72 180deg,
    #2a5298 210deg,
    #1e3c72 240deg,
    #2a5298 270deg,
    #1e3c72 300deg,
    #2a5298 330deg,
    #1e3c72 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.5;
  transition: all 1.2s ease;
  animation: exceptionalRotate 15s linear infinite;
  filter: drop-shadow(0 0 30px rgba(30, 60, 114, 0.3));
}

@keyframes exceptionalRotate {
  0% { transform: rotate(0deg); filter: hue-rotate(0deg) brightness(1); }
  25% { transform: rotate(90deg); filter: hue-rotate(5deg) brightness(1.1); }
  50% { transform: rotate(180deg); filter: hue-rotate(10deg) brightness(1); }
  75% { transform: rotate(270deg); filter: hue-rotate(5deg) brightness(1.1); }
  100% { transform: rotate(360deg); filter: hue-rotate(0deg) brightness(1); }
}

/* Quantum Crystal Background */
.solution-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(30, 60, 114, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(42, 82, 152, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(30, 60, 114, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(42, 82, 152, 0.02) 0%, transparent 45%),
    radial-gradient(circle at 70% 30%, rgba(30, 60, 114, 0.02) 0%, transparent 45%),
    linear-gradient(45deg, transparent 48%, rgba(30, 60, 114, 0.01) 50%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(42, 82, 152, 0.01) 50%, transparent 52%);
  background-size: 120px 120px, 120px 120px, 180px 180px, 100px 100px, 100px 100px, 40px 40px, 40px 40px;
  animation: quantumCrystal 25s ease-in-out infinite;
  pointer-events: none;
  border-radius: 28px;
}

@keyframes quantumCrystal {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    opacity: 0.7;
  }
  20% { 
    transform: scale(1.08) rotate(72deg);
    opacity: 0.9;
  }
  40% { 
    transform: scale(1.05) rotate(144deg);
    opacity: 0.8;
  }
  60% { 
    transform: scale(1.03) rotate(216deg);
    opacity: 0.9;
  }
  80% { 
    transform: scale(1.06) rotate(288deg);
    opacity: 0.8;
  }
}

/* Master Icon Section */
.solution-visual {
  position: relative;
  height: 240px;
  background: 
    linear-gradient(135deg, rgba(30, 60, 114, 0.04), rgba(42, 82, 152, 0.02)),
    radial-gradient(circle at 50% 50%, rgba(30, 60, 114, 0.01) 0%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 28px 28px 0 0;
}

/* Quantum Network Animation */
.solution-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(30, 60, 114, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 80% 80%, rgba(42, 82, 152, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(30, 60, 114, 0.07) 2px, transparent 2px),
    radial-gradient(circle at 30% 70%, rgba(42, 82, 152, 0.05) 3px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(30, 60, 114, 0.05) 3px, transparent 3px),
    linear-gradient(45deg, transparent 49%, rgba(30, 60, 114, 0.04) 51%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, rgba(42, 82, 152, 0.04) 51%, transparent 51%);
  background-size: 100px 100px, 100px 100px, 140px 140px, 80px 80px, 80px 80px, 30px 30px, 30px 30px;
  animation: quantumNetwork 20s ease-in-out infinite;
}

@keyframes quantumNetwork {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.03); }
}

/* Master Icon Container */
.solution-icon-wrapper {
  width: 120px;
  height: 120px;
  background: 
    linear-gradient(135deg, #1e3c72, #2a5298),
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: white;
  position: relative;
  transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 
    0 30px 60px rgba(30, 60, 114, 0.3),
    0 15px 30px rgba(30, 60, 114, 0.2),
    0 5px 15px rgba(30, 60, 114, 0.1),
    inset 0 0 50px rgba(255, 255, 255, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
  z-index: 20;
  transform-style: preserve-3d;
}

/* Quad Ring System */
.solution-icon-wrapper::before {
  content: "";
  position: absolute;
  inset: -20px;
  border: 4px solid transparent;
  border-top: 4px solid rgba(30, 60, 114, 0.5);
  border-right: 4px solid rgba(42, 82, 152, 0.5);
  border-radius: 50%;
  animation: quadRingRotate 8s linear infinite;
}

.solution-icon-wrapper::after {
  content: "";
  position: absolute;
  inset: -40px;
  border: 3px solid transparent;
  border-bottom: 3px solid rgba(30, 60, 114, 0.4);
  border-left: 3px solid rgba(42, 82, 152, 0.4);
  border-radius: 50%;
  animation: quadRingRotate 12s linear infinite reverse;
}

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

/* Quantum Core Effect */
.energy-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: 
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, 
    rgba(30, 60, 114, 0.3) 20%, 
    rgba(42, 82, 152, 0.2) 40%,
    transparent 70%);
  opacity: 0;
  animation: quantumCore 5s ease-in-out infinite;
  filter: blur(3px);
}

@keyframes quantumCore {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.4); }
}

/* Exceptional Content Section */
.solution-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 45px 40px;
  position: relative;
  background: 
    linear-gradient(180deg, #ffffff 0%, #fafbfc 30%, #ffffff 60%, #f8fafc 100%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
  border-radius: 0 0 28px 28px;
}

/* Exceptional Divider */
.solution-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(30, 60, 114, 0.15) 3%,
    rgba(42, 82, 152, 0.25) 10%,
    rgba(30, 60, 114, 0.35) 25%,
    rgba(42, 82, 152, 0.35) 40%,
    rgba(30, 60, 114, 0.35) 55%,
    rgba(42, 82, 152, 0.35) 70%,
    rgba(30, 60, 114, 0.25) 85%,
    rgba(42, 82, 152, 0.15) 95%,
    transparent 100%);
  animation: exceptionalShimmer 5s ease-in-out infinite;
  box-shadow: 0 3px 15px rgba(30, 60, 114, 0.15);
}

@keyframes exceptionalShimmer {
  0%, 100% { opacity: 0.8; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.08); }
}

/* Exceptional Typography */
.solution-name {
  font-size: 2rem;
  font-weight: 900;
  color: #1e293b;
  margin: 0 0 25px 0;
  font-family: 'Tajawal', sans-serif;
  transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  text-align: center;
  transform-style: preserve-3d;
  letter-spacing: -0.8px;
  line-height: 1.2;
}

/* Exceptional 3D Text */
.solution-name::before {
  content: attr(data-text);
  position: absolute;
  top: 4px;
  left: 4px;
  color: rgba(30, 60, 114, 0.12);
  z-index: -1;
  transition: all 1.2s ease;
}

.solution-name::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, #1e3c72, #2a5298, #1e3c72);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transition: all 1.2s ease;
  animation: exceptionalGlow 6s ease-in-out infinite;
}

@keyframes exceptionalGlow {
  0%, 100% { opacity: 0; background-position: 0% 50%; }
  50% { opacity: 1; background-position: 100% 50%; }
}

/* Exceptional Description */
.solution-summary {
  font-size: 1.15rem;
  color: #64748b;
  line-height: 2;
  margin: 0 0 40px 0;
  font-weight: 400;
  text-align: center;
  transition: all 1.2s ease;
  flex: 1;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.3px;
}

/* Exceptional Particle Effect */
.solution-summary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(30, 60, 114, 0.1), 
    rgba(42, 82, 152, 0.1), 
    rgba(30, 60, 114, 0.08),
    rgba(42, 82, 152, 0.08),
    transparent);
  animation: exceptionalParticle 12s ease-in-out infinite;
}

@keyframes exceptionalParticle {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

/* Exceptional Button */
.solution-arrow {
  margin-top: auto;
  padding: 22px 50px;
  background: 
    linear-gradient(135deg, #1e3c72, #2a5298),
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 
    0 25px 50px rgba(30, 60, 114, 0.35),
    0 12px 25px rgba(30, 60, 114, 0.25),
    0 6px 12px rgba(30, 60, 114, 0.15),
    inset 0 0 30px rgba(255, 255, 255, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-family: 'Tajawal', sans-serif;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  letter-spacing: 0.8px;
}

/* Exceptional Button Effects */
.solution-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, 
    transparent 20%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 80%);
  transform: translateX(-100%);
  transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.solution-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, 
    rgba(255, 255, 255, 0.5) 0%, 
    transparent 50%);
  opacity: 0;
  transition: opacity 1.2s ease;
}

/* Exceptional Hover Effects */
.solution-item:hover {
  transform: translateY(-30px) rotateX(2deg) rotateY(-2deg) scale(1.03);
  box-shadow: 
    0 0 0 3px rgba(30, 60, 114, 0.4),
    0 70px 140px rgba(30, 60, 114, 0.2),
    0 35px 70px rgba(30, 60, 114, 0.15),
    0 17px 35px rgba(30, 60, 114, 0.1),
    inset 0 0 60px rgba(255, 255, 255, 0.2);
}

.solution-item:hover::before {
  opacity: 1;
  animation-duration: 4s;
  filter: drop-shadow(0 0 40px rgba(30, 60, 114, 0.5));
}

.solution-item:hover::after {
  animation-duration: 8s;
  opacity: 1;
}

.solution-item:hover .solution-icon-wrapper {
  transform: scale(1.2) rotateY(180deg);
  box-shadow: 
    0 40px 80px rgba(30, 60, 114, 0.4),
    0 20px 40px rgba(30, 60, 114, 0.3),
    0 10px 20px rgba(30, 60, 114, 0.2),
    inset 0 0 60px rgba(255, 255, 255, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.solution-item:hover .energy-core {
  opacity: 1;
  animation-duration: 2s;
}

.solution-item:hover .solution-name {
  color: #1e3c72;
  transform: translateY(-10px) rotateX(-6deg);
  text-shadow: 0 20px 50px rgba(30, 60, 114, 0.2);
}

.solution-item:hover .solution-name::before {
  transform: translateX(8px) translateY(8px);
  color: rgba(30, 60, 114, 0.3);
}

.solution-item:hover .solution-name::after {
  opacity: 1;
}

.solution-item:hover .solution-summary {
  color: #475569;
  transform: translateY(-8px);
}

.solution-item:hover .solution-arrow {
  transform: translateY(-10px) scale(1.1) rotateZ(-0.5deg);
  box-shadow: 
    0 35px 70px rgba(30, 60, 114, 0.5),
    0 17px 35px rgba(30, 60, 114, 0.4),
    0 8px 16px rgba(30, 60, 114, 0.3),
    inset 0 0 40px rgba(255, 255, 255, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.solution-item:hover .solution-arrow::before {
  transform: translateX(100%);
}

.solution-item:hover .solution-arrow::after {
  opacity: 1;
}

/* Exceptional Active States */
.solution-item:active {
  transform: translateY(-25px) rotateX(1deg) rotateY(-1deg) scale(0.98);
}

.solution-arrow:active {
  transform: translateY(-5px) scale(0.96) rotateZ(0deg);
}

/* Diamond Border System */
.solution-item::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 27px;
  padding: 3px;
  background: conic-gradient(
    from 45deg at 50% 50%,
    #1e3c72 0deg,
    #2a5298 45deg,
    #1e3c72 90deg,
    #2a5298 135deg,
    #1e3c72 180deg,
    #2a5298 225deg,
    #1e3c72 270deg,
    #2a5298 315deg,
    #1e3c72 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.4;
  transition: all 1s ease;
  animation: diamondShimmer 12s linear infinite;
  filter: drop-shadow(0 0 20px rgba(30, 60, 114, 0.2));
}

@keyframes diamondShimmer {
  0% { transform: rotate(0deg); filter: hue-rotate(0deg); }
  50% { transform: rotate(180deg); filter: hue-rotate(10deg); }
  100% { transform: rotate(360deg); filter: hue-rotate(0deg); }
}

/* Crystal Field Background */
.solution-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 25% 25%, rgba(30, 60, 114, 0.02) 0%, transparent 35%),
    radial-gradient(circle at 75% 75%, rgba(42, 82, 152, 0.02) 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(30, 60, 114, 0.01) 0%, transparent 45%),
    linear-gradient(45deg, transparent 48%, rgba(30, 60, 114, 0.01) 50%, transparent 52%);
  background-size: 100px 100px, 100px 100px, 150px 150px, 30px 30px;
  animation: crystalField 20s ease-in-out infinite;
  pointer-events: none;
  border-radius: 24px;
}

@keyframes crystalField {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    opacity: 0.6;
  }
  33% { 
    transform: scale(1.05) rotate(120deg);
    opacity: 0.8;
  }
  66% { 
    transform: scale(1.02) rotate(240deg);
    opacity: 0.7;
  }
}

/* Elite Icon Section */
.solution-visual {
  position: relative;
  height: 220px;
  background: linear-gradient(135deg, rgba(30, 60, 114, 0.03), rgba(42, 82, 152, 0.01));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}

/* Crystal Network Animation */
.solution-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(30, 60, 114, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(42, 82, 152, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(30, 60, 114, 0.05) 2px, transparent 2px),
    linear-gradient(45deg, transparent 49%, rgba(30, 60, 114, 0.03) 51%, transparent 51%);
  background-size: 80px 80px, 80px 80px, 120px 120px, 25px 25px;
  animation: crystalNetwork 15s ease-in-out infinite;
}

@keyframes crystalNetwork {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.02); }
}

/* Premium Icon Container */
.solution-icon-wrapper {
  width: 110px;
  height: 110px;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  color: white;
  position: relative;
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 
    0 25px 50px rgba(30, 60, 114, 0.25),
    0 10px 20px rgba(30, 60, 114, 0.15),
    inset 0 0 40px rgba(255, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  z-index: 15;
  transform-style: preserve-3d;
}

/* Triple Ring System */
.solution-icon-wrapper::before {
  content: "";
  position: absolute;
  inset: -15px;
  border: 3px solid transparent;
  border-top: 3px solid rgba(30, 60, 114, 0.4);
  border-right: 3px solid rgba(42, 82, 152, 0.4);
  border-radius: 50%;
  animation: tripleRingRotate 6s linear infinite;
}

.solution-icon-wrapper::after {
  content: "";
  position: absolute;
  inset: -30px;
  border: 2px solid transparent;
  border-bottom: 2px solid rgba(30, 60, 114, 0.3);
  border-left: 2px solid rgba(42, 82, 152, 0.3);
  border-radius: 50%;
  animation: tripleRingRotate 9s linear infinite reverse;
}

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

/* Plasma Core Effect */
.energy-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, 
    rgba(255, 255, 255, 0.4) 0%, 
    rgba(30, 60, 114, 0.2) 30%, 
    transparent 70%);
  opacity: 0;
  animation: plasmaCore 4s ease-in-out infinite;
  filter: blur(2px);
}

@keyframes plasmaCore {
  0%, 100% { opacity: 0; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* Luxury Content Section */
.solution-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px 35px;
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 50%, #ffffff 100%);
  border-radius: 0 0 24px 24px;
}

/* Platinum Divider */
.solution-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(30, 60, 114, 0.2) 5%,
    rgba(42, 82, 152, 0.3) 15%,
    rgba(30, 60, 114, 0.4) 30%,
    rgba(42, 82, 152, 0.3) 45%,
    rgba(30, 60, 114, 0.4) 60%,
    rgba(42, 82, 152, 0.3) 75%,
    rgba(30, 60, 114, 0.3) 90%,
    transparent 100%);
  animation: platinumShimmer 4s ease-in-out infinite;
  box-shadow: 0 2px 10px rgba(30, 60, 114, 0.1);
}

@keyframes platinumShimmer {
  0%, 100% { opacity: 0.7; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.05); }
}

/* Elite Typography */
.solution-name {
  font-size: 1.8rem;
  font-weight: 900;
  color: #1e293b;
  margin: 0 0 20px 0;
  font-family: 'Tajawal', sans-serif;
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  text-align: center;
  transform-style: preserve-3d;
  letter-spacing: -0.5px;
}

/* Premium 3D Text */
.solution-name::before {
  content: attr(data-text);
  position: absolute;
  top: 3px;
  left: 3px;
  color: rgba(30, 60, 114, 0.15);
  z-index: -1;
  transition: all 1s ease;
}

.solution-name::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, #1e3c72, #2a5298, #1e3c72);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transition: all 1s ease;
  animation: premiumGlow 5s ease-in-out infinite;
}

@keyframes premiumGlow {
  0%, 100% { opacity: 0; background-position: 0% 50%; }
  50% { opacity: 0.9; background-position: 100% 50%; }
}

/* Premium Description */
.solution-summary {
  font-size: 1.1rem;
  color: #64748b;
  line-height: 1.9;
  margin: 0 0 35px 0;
  font-weight: 400;
  text-align: center;
  transition: all 1s ease;
  flex: 1;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.2px;
}

/* Luxury Particle Effect */
.solution-summary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(30, 60, 114, 0.08), 
    rgba(42, 82, 152, 0.08), 
    transparent);
  animation: luxuryParticle 10s ease-in-out infinite;
}

@keyframes luxuryParticle {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

/* Elite Button */
.solution-arrow {
  margin-top: auto;
  padding: 20px 45px;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 
    0 20px 40px rgba(30, 60, 114, 0.3),
    0 10px 20px rgba(30, 60, 114, 0.2),
    inset 0 0 25px rgba(255, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: 'Tajawal', sans-serif;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  letter-spacing: 0.5px;
}

/* Premium Button Effects */
.solution-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, 
    transparent 25%, 
    rgba(255, 255, 255, 0.25) 50%, 
    transparent 75%);
  transform: translateX(-100%);
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.solution-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, 
    rgba(255, 255, 255, 0.4) 0%, 
    transparent 60%);
  opacity: 0;
  transition: opacity 1s ease;
}

/* Ultra-Premium Hover Effects */
.solution-item:hover {
  transform: translateY(-25px) rotateX(3deg) rotateY(-3deg) scale(1.02);
  box-shadow: 
    0 0 0 2px rgba(30, 60, 114, 0.3),
    0 60px 120px rgba(30, 60, 114, 0.15),
    0 30px 60px rgba(30, 60, 114, 0.1),
    inset 0 0 50px rgba(255, 255, 255, 0.15);
}

.solution-item:hover::before {
  opacity: 0.9;
  animation-duration: 3s;
  filter: drop-shadow(0 0 30px rgba(30, 60, 114, 0.4));
}

.solution-item:hover::after {
  animation-duration: 6s;
  opacity: 0.9;
}

.solution-item:hover .solution-icon-wrapper {
  transform: scale(1.15) rotateY(180deg);
  box-shadow: 
    0 35px 70px rgba(30, 60, 114, 0.35),
    0 15px 30px rgba(30, 60, 114, 0.25),
    inset 0 0 50px rgba(255, 255, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.solution-item:hover .energy-core {
  opacity: 1;
  animation-duration: 1.5s;
}

.solution-item:hover .solution-name {
  color: #1e3c72;
  transform: translateY(-8px) rotateX(-8deg);
  text-shadow: 0 15px 40px rgba(30, 60, 114, 0.15);
}

.solution-item:hover .solution-name::before {
  transform: translateX(6px) translateY(6px);
  color: rgba(30, 60, 114, 0.25);
}

.solution-item:hover .solution-name::after {
  opacity: 1;
}

.solution-item:hover .solution-summary {
  color: #475569;
  transform: translateY(-5px);
}

.solution-item:hover .solution-arrow {
  transform: translateY(-8px) scale(1.08) rotateZ(-1deg);
  box-shadow: 
    0 30px 60px rgba(30, 60, 114, 0.4),
    0 15px 30px rgba(30, 60, 114, 0.3),
    inset 0 0 35px rgba(255, 255, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.solution-item:hover .solution-arrow::before {
  transform: translateX(100%);
}

.solution-item:hover .solution-arrow::after {
  opacity: 1;
}

/* Elite Active States */
.solution-item:active {
  transform: translateY(-20px) rotateX(1deg) rotateY(-1deg) scale(0.99);
}

.solution-arrow:active {
  transform: translateY(-3px) scale(0.97) rotateZ(0deg);
}

/* Holographic Border System */
.solution-item::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  padding: 2px;
  background: conic-gradient(
    from 0deg at 50% 50%,
    #1e3c72 0deg,
    #2a5298 90deg,
    #1e3c72 180deg,
    #2a5298 270deg,
    #1e3c72 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.3;
  transition: all 0.8s ease;
  animation: holographicRotate 8s linear infinite;
}

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

/* Quantum Field Background */
.solution-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(30, 60, 114, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(42, 82, 152, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(30, 60, 114, 0.02) 0%, transparent 60%);
  background-size: 80px 80px, 120px 120px, 160px 160px;
  animation: quantumField 15s ease-in-out infinite;
  pointer-events: none;
  border-radius: 20px;
}

@keyframes quantumField {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    opacity: 0.5;
  }
  25% { 
    transform: scale(1.1) rotate(90deg);
    opacity: 0.7;
  }
  50% { 
    transform: scale(1) rotate(180deg);
    opacity: 0.5;
  }
  75% { 
    transform: scale(1.1) rotate(270deg);
    opacity: 0.7;
  }
}

/* Advanced Icon Section */
.solution-visual {
  position: relative;
  height: 200px;
  background: linear-gradient(135deg, rgba(30, 60, 114, 0.05), rgba(42, 82, 152, 0.02));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

/* Neural Network Animation */
.solution-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 30% 30%, rgba(30, 60, 114, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 70% 70%, rgba(42, 82, 152, 0.1) 1px, transparent 1px),
    linear-gradient(45deg, transparent 48%, rgba(30, 60, 114, 0.05) 50%, transparent 52%);
  background-size: 60px 60px, 60px 60px, 20px 20px;
  animation: neuralPulse 10s ease-in-out infinite;
}

@keyframes neuralPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

/* Quantum Icon Container */
.solution-icon-wrapper {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: white;
  position: relative;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 
    0 20px 40px rgba(30, 60, 114, 0.3),
    inset 0 0 30px rgba(255, 255, 255, 0.1);
  z-index: 10;
  transform-style: preserve-3d;
}

/* Multi-Layer Ring System */
.solution-icon-wrapper::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px solid transparent;
  border-top: 2px solid rgba(30, 60, 114, 0.3);
  border-right: 2px solid rgba(42, 82, 152, 0.3);
  border-radius: 50%;
  animation: multiRingRotate 4s linear infinite;
}

.solution-icon-wrapper::after {
  content: "";
  position: absolute;
  inset: -20px;
  border: 1px solid transparent;
  border-bottom: 1px solid rgba(30, 60, 114, 0.2);
  border-left: 1px solid rgba(42, 82, 152, 0.2);
  border-radius: 50%;
  animation: multiRingRotate 6s linear infinite reverse;
}

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

/* Energy Core Effect */
.energy-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  opacity: 0;
  animation: energyCore 3s ease-in-out infinite;
}

@keyframes energyCore {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Advanced Content Section */
.solution-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 35px 30px;
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 0 0 20px 20px;
}

/* Holographic Divider */
.solution-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(30, 60, 114, 0.3) 10%,
    rgba(42, 82, 152, 0.4) 30%,
    rgba(30, 60, 114, 0.3) 50%,
    rgba(42, 82, 152, 0.4) 70%,
    rgba(30, 60, 114, 0.3) 90%,
    transparent 100%);
  animation: holographicShimmer 3s ease-in-out infinite;
}

@keyframes holographicShimmer {
  0%, 100% { opacity: 0.6; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.1); }
}

/* Advanced Typography */
.solution-name {
  font-size: 1.7rem;
  font-weight: 900;
  color: #1e293b;
  margin: 0 0 18px 0;
  font-family: 'Tajawal', sans-serif;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  text-align: center;
  transform-style: preserve-3d;
}

/* 3D Text Effect */
.solution-name::before {
  content: attr(data-text);
  position: absolute;
  top: 2px;
  left: 2px;
  color: rgba(30, 60, 114, 0.2);
  z-index: -1;
  transition: all 0.8s ease;
}

.solution-name::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, #1e3c72, #2a5298, #1e3c72);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transition: all 0.8s ease;
  animation: textGlow 4s ease-in-out infinite;
}

@keyframes textGlow {
  0%, 100% { opacity: 0; background-position: 0% 50%; }
  50% { opacity: 0.8; background-position: 100% 50%; }
}

/* Enhanced Description */
.solution-summary {
  font-size: 1.05rem;
  color: #64748b;
  line-height: 1.8;
  margin: 0 0 30px 0;
  font-weight: 400;
  text-align: center;
  transition: all 0.8s ease;
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* Particle Text Effect */
.solution-summary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(30, 60, 114, 0.1), transparent);
  animation: textParticle 8s ease-in-out infinite;
}

@keyframes textParticle {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

/* Quantum Button */
.solution-arrow {
  margin-top: auto;
  padding: 18px 40px;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 
    0 15px 35px rgba(30, 60, 114, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-family: 'Tajawal', sans-serif;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

/* Multi-Layer Button Effects */
.solution-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.solution-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* Ultra-Advanced Hover Effects */
.solution-item:hover {
  transform: translateY(-20px) rotateX(5deg) rotateY(-5deg);
  box-shadow: 
    0 0 0 2px rgba(30, 60, 114, 0.3),
    0 50px 100px rgba(30, 60, 114, 0.2),
    0 25px 50px rgba(30, 60, 114, 0.15),
    inset 0 0 40px rgba(255, 255, 255, 0.1);
}

.solution-item:hover::before {
  opacity: 0.8;
  animation-duration: 2s;
}

.solution-item:hover::after {
  animation-duration: 5s;
  opacity: 0.8;
}

.solution-item:hover .solution-icon-wrapper {
  transform: scale(1.2) rotateY(180deg);
  box-shadow: 
    0 30px 60px rgba(30, 60, 114, 0.5),
    inset 0 0 40px rgba(255, 255, 255, 0.2);
}

.solution-item:hover .energy-core {
  opacity: 1;
  animation-duration: 1s;
}

.solution-item:hover .solution-name {
  color: #1e3c72;
  transform: translateY(-5px) rotateX(-10deg);
  text-shadow: 0 10px 30px rgba(30, 60, 114, 0.2);
}

.solution-item:hover .solution-name::before {
  transform: translateX(4px) translateY(4px);
  color: rgba(30, 60, 114, 0.4);
}

.solution-item:hover .solution-name::after {
  opacity: 1;
}

.solution-item:hover .solution-summary {
  color: #475569;
  transform: translateY(-3px);
}

.solution-item:hover .solution-arrow {
  transform: translateY(-5px) scale(1.05) rotateZ(-2deg);
  box-shadow: 
    0 25px 50px rgba(30, 60, 114, 0.5),
    inset 0 0 30px rgba(255, 255, 255, 0.2);
}

.solution-item:hover .solution-arrow::before {
  transform: translateX(100%);
}

.solution-item:hover .solution-arrow::after {
  opacity: 1;
}

/* Active State Effects */
.solution-item:active {
  transform: translateY(-15px) rotateX(2deg) rotateY(-2deg) scale(0.98);
}

.solution-arrow:active {
  transform: translateY(-2px) scale(0.95) rotateZ(0deg);
}

/* Floating Orbital Ring */
.solution-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  border: 3px solid transparent;
  border-top: 3px solid rgba(30, 60, 114, 0.2);
  border-right: 3px solid rgba(42, 82, 152, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: orbitRotate 12s linear infinite;
  pointer-events: none;
}

@keyframes orbitRotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Liquid Morph Background */
.solution-item::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 70%, rgba(30, 60, 114, 0.05) 0%, transparent 50%),
              radial-gradient(circle at 70% 30%, rgba(42, 82, 152, 0.05) 0%, transparent 50%);
  animation: liquidMorph 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes liquidMorph {
  0%, 100% { 
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    transform: rotate(0deg) scale(1);
  }
  25% { 
    border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
    transform: rotate(90deg) scale(1.1);
  }
  50% { 
    border-radius: 30% 70% 70% 30% / 70% 30% 30% 70%;
    transform: rotate(180deg) scale(1);
  }
  75% { 
    border-radius: 70% 30% 30% 70% / 30% 70% 70% 30%;
    transform: rotate(270deg) scale(1.1);
  }
}

/* Split Layout Design */
.solution-visual {
  position: relative;
  height: 180px;
  background: linear-gradient(135deg, rgba(30, 60, 114, 0.1), rgba(42, 82, 152, 0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Wave Effect Background */
.solution-visual::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(45deg, transparent 30%, rgba(30, 60, 114, 0.1) 50%, transparent 70%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0% 100%);
  animation: waveMove 4s ease-in-out infinite;
}

@keyframes waveMove {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-20px); }
}

/* Circular Icon with Ring */
.solution-icon-wrapper {
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: white;
  position: relative;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 15px 30px rgba(30, 60, 114, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  z-index: 2;
}

/* Rotating Ring Around Icon */
.solution-icon-wrapper::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid transparent;
  border-top: 2px solid rgba(30, 60, 114, 0.4);
  border-bottom: 2px solid rgba(42, 82, 152, 0.4);
  border-radius: 50%;
  animation: ringRotate 3s linear infinite;
}

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

/* Pulse Effect */
.solution-icon-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 60, 114, 0.2) 0%, transparent 70%);
  opacity: 0;
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Content Section with Split Design */
.solution-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 30px 25px;
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* Diagonal Divider */
.solution-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(30, 60, 114, 0.3) 20%, 
    rgba(42, 82, 152, 0.3) 50%, 
    rgba(30, 60, 114, 0.3) 80%, 
    transparent 100%);
}

/* Modern Typography */
.solution-name {
  font-size: 1.6rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 15px 0;
  font-family: 'Tajawal', sans-serif;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  text-align: center;
}

/* Animated Text Shadow */
.solution-name::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, #1e3c72, #2a5298, #1e3c72);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transition: opacity 0.6s ease;
  animation: textShimmer 3s ease-in-out infinite;
}

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

.solution-item:hover .solution-name::after {
  opacity: 1;
}

.solution-item:hover .solution-name {
  transform: translateY(-3px);
  color: #1e3c72;
}

/* Modern Description */
.solution-summary {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.7;
  margin: 0 0 25px 0;
  font-weight: 400;
  text-align: center;
  transition: all 0.5s ease;
  flex: 1;
}

.solution-item:hover .solution-summary {
  color: #475569;
}

/* Modern Button with Hover States */
.solution-arrow {
  margin-top: auto;
  padding: 15px 30px;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 10px 25px rgba(30, 60, 114, 0.3),
    inset 0 0 15px rgba(255, 255, 255, 0.1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Tajawal', sans-serif;
  position: relative;
  overflow: hidden;
}

/* Button Shine Effect */
.solution-arrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.8s ease;
}

.solution-item:hover .solution-arrow {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 35px rgba(30, 60, 114, 0.4),
    inset 0 0 25px rgba(255, 255, 255, 0.2);
}

.solution-item:hover .solution-arrow::before {
  left: 100%;
}

/* Hover Effects */
.solution-item:hover {
  transform: translateY(-10px);
  box-shadow: 
    0 0 0 2px rgba(30, 60, 114, 0.2),
    0 30px 60px rgba(30, 60, 114, 0.15),
    0 15px 30px rgba(30, 60, 114, 0.1);
}

.solution-item:hover .solution-icon-wrapper {
  transform: scale(1.1);
  box-shadow: 
    0 20px 40px rgba(30, 60, 114, 0.4),
    inset 0 0 30px rgba(255, 255, 255, 0.2);
}

.solution-item:hover::before {
  border-top-color: rgba(30, 60, 114, 0.4);
  border-right-color: rgba(42, 82, 152, 0.4);
  animation-duration: 6s;
}

.solution-item:hover::after {
  animation-duration: 4s;
}

/* Responsive Design for Solutions Zone */
@media (max-width: 1200px) {
  .solutions-collection {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Diagonal Icon Section */
.solution-visual {
  position: relative;
  padding: 40px 30px 30px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.03) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 85%,
    85% 100%,
    0 100%
  );
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(28, 67, 131, 0.3), transparent) 1;
}

/* Geometric Icon Container */
.solution-icon-wrapper {
  width: 85px;
  height: 85px;
  background:linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: white;
  position: relative;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 12px 25px rgba(59, 130, 246, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  transform: rotate(0deg);
}

.solution-icon-wrapper::before {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  background: conic-gradient(from 0deg, #1e3c72, #2a5298, #2a5298);
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease;
  animation: hexagonRotate 8s linear infinite;
}

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

.solution-item:hover .solution-icon-wrapper::before {
  opacity: 0.4;
}

.solution-item:hover .solution-icon-wrapper {
  transform: scale(1.15) rotate(15deg);
  box-shadow: 
    0 20px 40px rgba(59, 130, 246, 0.4),
    0 0 0 2px rgba(255, 255, 255, 0.3) inset;
}

.solution-icon-wrapper i {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.solution-item:hover .solution-icon-wrapper i {
  transform: scale(1.1) rotate(-15deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Angled Content Section */
.solution-content {
  padding: 30px 25px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  clip-path: polygon(
    15% 0,
    100% 0,
    100% 100%,
    0 100%,
    0 15%
  );
}

.solution-content::before {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(16, 61, 133, 0.4), transparent);
  transform: rotate(-2deg);
}

.solution-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 15px 0;
  font-family: 'Tajawal', sans-serif;
  transition: all 0.5s ease;
  position: relative;
  transform: rotate(-1deg);
}

.solution-name::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: 50%;
  transform: translateX(50%) rotate(2deg);
  width: 0;
  height: 3px;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.solution-item:hover .solution-name {
  color: #1e3c72;
  transform: translateY(-3px) rotate(0deg);
}

.solution-item:hover .solution-name::after {
  width: 50px;
}

.solution-summary {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 25px 0;
  font-weight: 400;
  text-align: center;
  transition: all 0.5s ease;
  transform: rotate(1deg);
}

.solution-item:hover .solution-summary {
  color: #475569;
  transform: translateY(-3px) rotate(0deg);
}

/* Diamond Button Link */
.solution-arrow {
  margin-top: auto;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  clip-path: polygon(
    50% 0%,
    100% 50%,
    50% 100%,
    0% 50%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  opacity: 0;
  transform: translateY(15px) scale(0.7);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 8px 20px rgba(59, 130, 246, 0.3),
    inset 0 0 15px rgba(255, 255, 255, 0.2);
  position: relative;
  cursor: pointer;
  text-decoration: none;
}

.solution-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(50%, -50%);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.solution-arrow i {
  transform: rotate(180deg);
}

.solution-item:hover .solution-arrow {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.solution-item:hover .solution-arrow::before {
  width: 120%;
  height: 120%;
}

.solution-arrow:hover {
  transform: translateY(-5px) scale(1.15);
  box-shadow: 
    0 15px 35px rgba(59, 130, 246, 0.5),
    inset 0 0 25px rgba(255, 255, 255, 0.3);
}

.solution-arrow:active {
  transform: translateY(-2px) scale(0.9);
}


/* Responsive Design for Solutions Zone */
@media (max-width: 1200px) {
  .solutions-collection {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .solutions-zone {
    padding: 80px 0;
  }
  
  .solutions-main-heading {
    font-size: 2.8rem;
  }
  
  .solutions-lead-text {
    font-size: 1.1rem;
  }
  
  .solutions-collection {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .solution-icon-wrapper {
    width: 85px;
    height: 85px;
    font-size: 30px;
  }
  
  .solution-name {
    font-size: 1.3rem;
  }
  
  .solution-summary {
    font-size: 0.9rem;
    max-width: 240px;
  }
}

@media (max-width: 576px) {
  .solutions-zone {
    padding: 60px 0;
  }
  
  .solutions-intro {
    margin-bottom: 50px;
  }
  
  .solutions-main-heading {
    font-size: 2.2rem;
  }
  
  .solutions-lead-text {
    font-size: 1rem;
  }
  
  .solutions-collection {
    gap: 35px;
  }
  
  .solution-visual {
    padding: 25px 15px 10px;
  }
  
  .solution-icon-wrapper {
    width: 75px;
    height: 75px;
    font-size: 26px;
  }
  
  .solution-content {
    padding: 20px 15px;
  }
  
  .solution-name {
    font-size: 1.2rem;
  }
  
  .solution-summary {
    font-size: 0.85rem;
    max-width: 220px;
  }
}

@media (max-width: 480px) {
  .solutions-collection {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .solution-visual {
    padding: 30px 20px 15px;
  }
  
  .solution-icon-wrapper {
    width: 70px;
    height: 70px;
    font-size: 28px;
  }
  
  .solution-content {
    padding: 25px 20px;
  }
  
  .solution-name {
    font-size: 1.3rem;
  }
  
  .solution-summary {
    font-size: 0.9rem;
  }
}

@media (max-width: 576px) {
  .solutions-zone {
    padding: 60px 0;
  }
  
  .solutions-lead-text {
    font-size: 1rem;
  }
  
  .solutions-collection {
    gap: 20px;
  }
  
  .solution-visual {
    padding: 25px 15px 10px;
  }
  
  .solution-icon-wrapper {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }
  
  .solution-content {
    padding: 20px 15px;
  }
  
  .solution-name {
    font-size: 1.2rem;
  }
  
  .solution-summary {
    font-size: 0.85rem;
  }
  
  .solution-arrow {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
}

/* Loading Animation */
.solutions-zone.loading .solution-item {
  opacity: 0;
  transform: translateY(30px);
}

.solutions-zone.loaded .solution-item {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.solutions-zone.loaded .solution-item:nth-child(1) { transition-delay: 0.1s; }
.solutions-zone.loaded .solution-item:nth-child(2) { transition-delay: 0.2s; }
.solutions-zone.loaded .solution-item:nth-child(3) { transition-delay: 0.3s; }
.solutions-zone.loaded .solution-item:nth-child(4) { transition-delay: 0.4s; }
.solutions-zone.loaded .solution-item:nth-child(5) { transition-delay: 0.5s; }
.solutions-zone.loaded .solution-item:nth-child(6) { transition-delay: 0.6s; }

/* Enhanced Interactions */
.solution-item:active {
  transform: translateY(-5px) scale(0.98);
}

/* Focus States */
.solution-item:focus {
  outline: none;
  box-shadow: 
    0 20px 40px rgba(59, 130, 246, 0.2),
    0 0 0 3px rgba(59, 130, 246, 0.3);
}

.solution-item:focus-visible {
  outline: 3px solid #1e3c72;
  outline-offset: 2px;
}

/* Performance Optimization */
@media (prefers-reduced-motion: reduce) {
  .solution-item,
  .solution-icon-wrapper,
  .solution-arrow {
    animation: none !important;
    transition: none !important;
  }
  
  .solution-item:hover {
    transform: none;
  }
}

 /* Tablet Frame Styles */
.tablet-frame {
  position: relative;
  width: 100%;
  max-width: 200px;
  height: 600px;
  margin-left: 400px;
  margin-top: -280px;
  transform-style: preserve-3d;
  perspective: 1000px;
  animation: tabletFloat 6s ease-in-out infinite;
  
}
.tablet-frame img{
  width: 700px;
}
/* Professional Server Animations */
.tablet-server-animations {
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  justify-content: space-between;   
  align-items: center;
  padding: 0 20px;
  pointer-events: none;
  z-index: 10;
}

.server-animation {
  position: relative;
  animation: serverFloat 4s ease-in-out infinite;
}

.server-1 {
  animation-delay: 0s;
}

.server-2 {
  animation-delay: 2s;
}

/* Wavy Connection Border */
.server-connection {
  position: absolute;
  left: 70px;
  right: 70px;
  height: 60px;
  top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.wave-border {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--primary-blue) 20%, 
    var(--secondary-blue) 50%, 
    var(--accent-blue) 80%, 
    transparent 100%
  );
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.wave-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(100, 181, 246, 0.8), 
    transparent
  );
  animation: waveFlow 3s linear infinite;
}

.wave-top {
  transform: translateY(-8px);
  animation-delay: 0s;
}

.wave-middle {
  transform: translateY(0);
  animation-delay: 0.5s;
}

.wave-bottom {
  transform: translateY(8px);
  animation-delay: 1s;
}

/* Connection Particles */
.connection-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.connection-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--accent-blue);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(100, 181, 246, 0.6);
  animation: connectionParticleMove 4s ease-in-out infinite;
}

.cp-1 {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.cp-2 {
  top: 50%;
  left: 50%;
  animation-delay: 1s;
}

.cp-3 {
  top: 70%;
  left: 30%;
  animation-delay: 2s;
}

.cp-4 {
  top: 40%;
  left: 70%;
  animation-delay: 3s;
}

.server-svg {
  filter: drop-shadow(0 4px 20px rgba(75, 34, 181, 0.3));
  transition: transform 0.3s ease;
}

.server-svg:hover {
  transform: scale(1.1);
}

/* Server Node Styling */
.server-node {
  animation: nodeRotate 8s linear infinite;
}

.server-particles circle {
  animation: particleFloat 3s ease-in-out infinite;
}

.server-particles circle:nth-child(1) { animation-delay: 0s; }
.server-particles circle:nth-child(2) { animation-delay: 0.5s; }
.server-particles circle:nth-child(3) { animation-delay: 1s; }
.server-particles circle:nth-child(4) { animation-delay: 1.5s; }

/* Server Animation Keyframes */
@keyframes serverFloat {
  0%, 100% {
    transform: translateY(0) rotateX(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-10px) rotateX(5deg);
    opacity: 1;
  }
}

@keyframes nodeRotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-8px) scale(1.2);
    opacity: 1;
  }
}

@keyframes waveFlow {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes connectionParticleMove {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translate(10px, -5px) scale(1.2);
    opacity: 1;
  }
  50% {
    transform: translate(20px, 0) scale(1);
    opacity: 0.8;
  }
  75% {
    transform: translate(10px, 5px) scale(1.1);
    opacity: 1;
  }
}

/* Responsive Server Animations */
@media (max-width: 768px) {
  .tablet-frame img{
    margin-right: -100px;
  }
  .tablet-server-animations {
    top: -80px;
    height: 60px;
    padding: 0 10px;
  }
  
  .server-connection {
    left: 55px;
    right: 55px;
    height: 40px;
  }
  
  .server-svg {
    height: 60px !important;
    width: 45px !important;
  }
}

@media (max-width: 576px) {
  .tablet-server-animations {
    top: -70px;
    height: 50px;
    padding: 0 5px;
  }
  
  .server-connection {
    left: 45px;
    right: 45px;
    height: 30px;
  }
  
  .wave-border {
    height: 1.5px;
  }
  
  .connection-particle {
    width: 2px;
    height: 2px;
  }
  
  .server-svg {
    height: 50px !important;
    width: 35px !important;
  }
}

.tablet-body {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
  border-radius: 25px;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.4),
    inset 0 2px 5px rgba(255, 255, 255, 0.1),
    inset 0 -2px 5px rgba(0, 0, 0, 0.3);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 8px;
}

.tablet-frame:hover .tablet-body {
  transform: rotateY(-5deg) scale(1.02);
}

.tablet-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 
    inset 0 4px 15px rgba(0, 0, 0, 0.8),
    0 0 0 2px rgba(255, 255, 255, 0.05);
}

.screen-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 20px;
  background: #000;
  border-radius: 0 0 10px 10px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.notch-camera {
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #333, #000);
  border-radius: 50%;
  box-shadow: 
    0 0 10px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.notch-speaker {
  width: 30px;
  height: 3px;
  background: linear-gradient(90deg, #222, #333, #222);
  border-radius: 2px;
  opacity: 0.8;
}

.screen-content {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  padding-top: 20px;
}

.demo-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 0.4s ease;
}

.tablet-frame:hover .demo-video {
  transform: scale(1.02);
}

.video-overlay {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: calc(100% - 20px);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.tablet-frame:hover .video-overlay {
  opacity: 1;
}

.play-button {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.8);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.tablet-frame:hover .play-button {
  transform: scale(1);
}

.play-button i {
  font-size: 20px;
  color: #2a5298;
  margin-left: 3px;
}

.tablet-frame-bezel {
  position: absolute;
  inset: 0;
  border-radius: 25px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  pointer-events: none;
}

.tablet-buttons {
  position: absolute;
  right: -3px;
  top: 100px;
  height: 150px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.volume-up {
  width: 4px;
  height: 40px;
  background: linear-gradient(90deg, #333, #555, #333);
  border-radius: 2px;
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.volume-down {
  width: 4px;
  height: 40px;
  background: linear-gradient(90deg, #333, #555, #333);
  border-radius: 2px;
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.power-button {
  position: absolute;
  left: -3px;
  top: 120px;
  width: 4px;
  height: 60px;
  background: linear-gradient(90deg, #333, #555, #333);
  border-radius: 2px;
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.tablet-home-button {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 5px 15px rgba(0, 0, 0, 0.2),
    inset 0 2px 5px rgba(255, 255, 255, 0.5);
}

.home-button-sensor {
  width: 16px;
  height: 16px;
  border: 2px solid #888;
  border-radius: 4px;
  background: radial-gradient(circle, #666, #444);
}

.tablet-shadow {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 20px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.4) 0%,
    transparent 70%
  );
  filter: blur(15px);
  z-index: -1;
}

.tablet-reflection {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 60%
  );
  border-radius: 25px;
  pointer-events: none;
  animation: reflectionMove 8s ease-in-out infinite;
}

/* Animations */
@keyframes tabletFloat {
  0%, 100% {
    transform: translateY(0) rotateX(0) rotateY(0);
  }
  50% {
    transform: translateY(-10px) rotateX(1deg) rotateY(1deg);
  }
}

@keyframes reflectionMove {
  0%, 100% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(10px) translateY(-5px);
  }
}

/* Features Cards Section - Professional Blue Theme */
.features-cards-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
  position: relative;
  overflow: hidden;
}

.features-cards-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-blue), transparent);
  opacity: 0.3;
}

.features-cards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 25px;
  position: relative;
  z-index: 1;
}

.feature-card-item {
  background: var(--white);
  border-radius: 25px;
  padding: 35px 25px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(30, 60, 114, 0.08);
  border: 2px solid rgba(30, 60, 114, 0.1);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.feature-card-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue), var(--accent-blue));
  opacity: 0;
  transition: all 0.5s ease;
  transform: scaleX(0);
  transform-origin: left;
}

.feature-card-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(30, 60, 114, 0.08) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: 25px;
}

.feature-card-item:hover {
  transform: translateY(-20px) rotateX(8deg) scale(1.02);
  box-shadow: 0 30px 80px rgba(30, 60, 114, 0.25);
  border-color: var(--primary-blue);
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F4F8 100%);
}

.feature-card-item:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

.feature-card-item:hover::after {
  opacity: 1;
}

.feature-card-item.active {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--white);
  border-color: var(--primary-blue);
  box-shadow: 0 25px 60px rgba(30, 60, 114, 0.4);
}

.feature-card-item.active .feature-title,
.feature-card-item.active .feature-description {
  color: var(--white);
}

.feature-card-item.active .feature-icon {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
}

.feature-icon-wrapper {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  position: relative;
}

.feature-icon {
  width: 75px;
  height: 75px;
  background: linear-gradient(135deg, rgba(30, 60, 114, 0.08), rgba(42, 82, 152, 0.12));
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--primary-blue);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 25px rgba(30, 60, 114, 0.15);
  border: 2px solid rgba(30, 60, 114, 0.15);
  position: relative;
  overflow: hidden;
}

.feature-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}

.feature-card-item:hover .feature-icon {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--white);
  transform: scale(1.2) rotate(8deg);
  box-shadow: 0 25px 50px rgba(30, 60, 114, 0.5);
  border-color: var(--accent-blue);
}

.feature-card-item:hover .feature-icon::before {
  transform: translateX(100%);
}

.feature-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark-blue);
  margin: 0 0 12px 0;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.feature-card-item:hover .feature-title {
  color: var(--primary-blue);
  transform: translateY(-2px);
}

.feature-description {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-light);
  margin: 0;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.feature-card-item:hover .feature-description {
  color: var(--dark-blue);
}

/* Floating particles effect */
.feature-card-item .particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 25px;
}

.feature-card-item .particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--primary-blue);
  border-radius: 50%;
  opacity: 0;
  animation: floatParticle 4s ease-in-out infinite;
}

.feature-card-item:hover .particle {
  opacity: 0.8;
}

@keyframes floatParticle {
  0%, 100% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }
  50% {
    transform: translateY(-30px) scale(1);
    opacity: 0.8;
  }
}

/* Professional hover effects */
.feature-card-item {
  cursor: pointer;
}

.feature-card-item:hover {
  animation: cardFloat 3s ease-in-out infinite;
}

@keyframes cardFloat {
  0%, 100% {
    transform: translateY(-20px) rotateX(8deg) scale(1.02);
  }
  50% {
    transform: translateY(-25px) rotateX(6deg) scale(1.03);
  }
}

/* Responsive Design for Features Cards */
@media (max-width: 1200px) {
  .features-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .feature-card-item {
    padding: 30px 20px;
  }
  
  .feature-icon {
    width: 65px;
    height: 65px;
    font-size: 26px;
  }
}

@media (max-width: 992px) {
  .features-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .feature-card-item {
    padding: 25px 15px;
  }
  
  .feature-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }
  
  .feature-title {
    font-size: 16px;
  }
  
  .feature-description {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .features-cards-section {
    padding: 80px 0; /* Increased padding for mobile */
  }
  
  .features-cards-grid {
    grid-template-columns: 1fr;
    gap: 15px;
    max-width: 400px;
    margin: 0 auto;
  }
  
  .feature-card-item {
    padding: 25px 20px;
  }
  
  .feature-icon {
    width: 55px;
    height: 55px;
    font-size: 22px;
  }
}

@media (max-width: 576px) {
  .features-cards-section {
    padding: 60px 0; /* Added more padding for small mobile */
  }
  
  .feature-card-item {
    padding: 20px 15px;
  }
  
  .feature-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  
  .feature-title {
    font-size: 15px;
  }
  
  .feature-description {
    font-size: 11px;
  }
}

/* Video Section Styles */
.about-video-section-main {
  position: relative;
}

.video-showcase-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 600px;
}

/* Floating Video Elements */
.floating-video-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.video-element {
  position: absolute;
  animation: floatVideoElement 6s ease-in-out infinite;
}

.video-element-1 {
  top: 20%;
  right: -50px;
  animation-delay: 0s;
}

.video-element-2 {
  top: 50%;
  left: -60px;
  animation-delay: 2s;
}

.video-element-3 {
  bottom: 20%;
  right: -40px;
  animation-delay: 4s;
}

.mini-phone {
  width: 80px;
  height: 160px;
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  border-radius: 20px;
  padding: 4px;
  box-shadow: 0 15px 35px rgba(30, 60, 114, 0.3);
  transform: rotate(15deg);
  transition: transform 0.3s ease;
}

.mini-screen {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--primary-blue);
}

@keyframes floatVideoElement {
  0%, 100% {
    transform: translateY(0) rotate(15deg) scale(1);
  }
  50% {
    transform: translateY(-20px) rotate(18deg) scale(1.05);
  }
}

/* Video Stats Badges */
.video-stats-badges {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 15;
}

.stat-badge {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--white);
  padding: 12px 20px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.stat-badge:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(30, 60, 114, 0.4);
}

.stat-badge i {
  font-size: 16px;
  color: var(--accent-blue);
}

/* Company Stats Grid */
.company-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 40px 0;
}

.stat-icon-main {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, rgba(30, 60, 114, 0.1), rgba(42, 82, 152, 0.15));
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  font-size: 20px;
  color: var(--primary-blue);
  border: 2px solid rgba(30, 60, 114, 0.15);
  transition: all 0.3s ease;
}

.stat-item-main:hover .stat-icon-main {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--white);
  transform: scale(1.1);
}

/* Responsive Design for Video Section */
@media (max-width: 992px) {
  .video-showcase-wrapper {
    min-height: 500px;
  }
  
  .video-element-1 {
    right: -30px;
  }
  
  .video-element-2 {
    left: -40px;
  }
  
  .video-element-3 {
    right: -25px;
  }
  
  .mini-phone {
    width: 70px;
    height: 140px;
  }
  
  .video-stats-badges {
    bottom: -30px;
    gap: 15px;
  }
  
  .stat-badge {
    padding: 10px 16px;
    font-size: 12px;
  }
  
  .company-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .video-showcase-wrapper {
    min-height: 450px;
  }
  
  .video-element-1 {
    right: -20px;
    top: 15%;
  }
  
  .video-element-2 {
    left: -30px;
    top: 45%;
  }
  
  .video-element-3 {
    right: -15px;
    bottom: 15%;
  }
  
  .mini-phone {
    width: 60px;
    height: 120px;
  }
  
  .mini-screen {
    font-size: 18px;
  }
  
  .video-stats-badges {
    bottom: -20px;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .stat-badge {
    padding: 8px 14px;
    font-size: 11px;
  }
  
  .company-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  
  .stat-icon-main {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }
  
  .stat-number-main {
    font-size: 28px;
  }
  
  .stat-label-main {
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .video-showcase-wrapper {
    min-height: 400px;
  }
  
  .floating-video-elements {
    display: none;
  }
  
  .video-stats-badges {
    bottom: -15px;
    gap: 8px;
  }
  
  .stat-badge {
    padding: 6px 12px;
    font-size: 10px;
  }
  
  .company-stats-grid {
    grid-template-columns: 1fr;
    gap: 15px;
    max-width: 250px;
    margin: 30px auto;
  }
  
  .stat-icon-main {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  .stat-number-main {
    font-size: 24px;
  }
  
  .stat-label-main {
    font-size: 13px;
  }
}

/* About Section - White Background with Dark Blue Details */
.about-section-main {
  padding: 100px 0;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
  position: relative;
  overflow: hidden;
}

.about-section-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-blue), transparent);
  opacity: 0.3;
}

.about-container-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Image Section - White Background with Dark Blue Details */
.about-image-section-main {
  position: relative;
}

.about-image-wrapper-main {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(10, 25, 49, 0.15);
  background: var(--white);
  padding: 3px;
}

.about-image-wrapper-main::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(135deg, var(--dark-blue), var(--primary-blue));
  border-radius: 20px;
  z-index: -1;
}

.about-image-main {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 17px;
  display: block;
}

.image-overlay-main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(10, 25, 49, 0.05) 0%, rgba(30, 60, 114, 0.02) 100%);
  border-radius: 17px;
  pointer-events: none;
}

.corner-accent-main {
  position: absolute;
  width: 120px;
  height: 120px;
  background: var(--primary-blue);
  border-radius: 0 0 20px 0;
  top: 0;
  left: 0;
  z-index: 2;
}

.corner-accent-main.bottom {
  top: auto;
  bottom: 0;
  border-radius: 0 20px 0 0;
}

.logo-watermark-main {
  position: absolute;
  bottom: 30px;
  left: 30px;
  background: rgba(10, 25, 49, 0.9);
  padding: 15px 25px;
  border-radius: 12px;
  font-weight: 700;
  color: var(--white);
  font-size: 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 25px rgba(10, 25, 49, 0.2);
  z-index: 3;
}

/* Content Section - White Background with Dark Blue Details */
.about-content-section-main {
  padding: 20px 0;
}

.line-ed {
  display: inline-block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
  margin-left: 15px;
  position: relative;
  border-radius: 2px;
  animation: lineExpand 2s ease-in-out infinite;
  vertical-align: middle;
}

.line-ed::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(100, 181, 246, 0.8), transparent);
  border-radius: 2px;
  animation: lineGlow 3s linear infinite;
}

.line-ed::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -8px;
  width: 8px;
  height: 8px;
  background: var(--secondary-blue);
  border-radius: 50%;
  transform: translateY(-50%);
  animation: dotPulse 2s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(42, 82, 152, 0.5);
}

@keyframes lineExpand {
  0%, 100% {
    width: 60px;
    opacity: 0.8;
  }
  50% {
    width: 80px;
    opacity: 1;
  }
}

@keyframes lineGlow {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes dotPulse {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-50%) scale(1.3);
    opacity: 1;
  }
}
/* Professional Cursor with Click Animation */
.about-subtitle-main {
  display: inline-block;
  background: rgba(10, 25, 49, 0.1);
  color: var(--primary-blue);
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
  border: 1px solid rgba(10, 25, 49, 0.2);
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.about-subtitle-main::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -40px;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  border-radius: 50%;
  transform: translateY(-50%);
  opacity: 1;
  transition: all 0.3s ease;
  z-index: 1;
  animation: cursorPulse 1.5s ease-in-out infinite;
}

.about-subtitle-main::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -35px;
  width: 0;
  height: 0;
  border-left: 8px solid var(--primary-blue);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translateY(-50%);
  opacity: 1;
  transition: all 0.3s ease;
  z-index: 2;
  animation: cursorClick 1.5s ease-in-out infinite;
}

.about-subtitle-main:hover::before {
  opacity: 1;
  right: -45px;
  animation: cursorPulse 1.5s ease-in-out infinite;
}

.about-subtitle-main:hover::after {
  opacity: 1;
  right: -30px;
  animation: cursorClick 1.5s ease-in-out infinite;
}

@keyframes cursorPulse {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 0 0 rgba(30, 60, 114, 0.7);
  }
  50% {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 0 10px rgba(30, 60, 114, 0);
  }
}

@keyframes cursorClick {
  0%, 100% {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
  }
  30% {
    transform: translateY(-50%) translateX(-5px);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-50%) translateX(-8px);
    opacity: 1;
  }
  70% {
    transform: translateY(-50%) translateX(-5px);
    opacity: 0.8;
  }
}

/* Click effect particles */
.about-subtitle-main:hover .click-particles {
  opacity: 1;
}

.click-particles {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.click-particles .particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--accent-blue);
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat 2s ease-in-out infinite;
}

.click-particles .particle:nth-child(1) {
  top: -10px;
  left: 50%;
  animation-delay: 0s;
}

.click-particles .particle:nth-child(2) {
  top: 50%;
  right: -15px;
  animation-delay: 0.3s;
}

.click-particles .particle:nth-child(3) {
  bottom: -10px;
  left: 50%;
  animation-delay: 0.6s;
}

.click-particles .particle:nth-child(4) {
  top: 50%;
  left: -15px;
  animation-delay: 0.9s;
}

@keyframes particleFloat {
  0%, 100% {
    transform: scale(0) translate(0, 0);
    opacity: 0;
  }
  50% {
    transform: scale(1) translate(var(--x, 0), var(--y, 0));
    opacity: 1;
  }
}

.click-particles .particle:nth-child(1) {
  --x: -10px;
  --y: -10px;
}

.click-particles .particle:nth-child(2) {
  --x: -15px;
  --y: 0;
}

.click-particles .particle:nth-child(3) {
  --x: -10px;
  --y: 10px;
}

.click-particles .particle:nth-child(4) {
  --x: -5px;
  --y: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .about-subtitle-main::before {
    right: -35px;
    width: 25px;
    height: 25px;
  }
  
  .about-subtitle-main::after {
    right: -30px;
    border-left-width: 6px;
    border-top-width: 5px;
    border-bottom-width: 5px;
  }
  
  .about-subtitle-main:hover::before {
    right: -40px;
  }
  
  .about-subtitle-main:hover::after {
    right: -25px;
  }
  
  .click-particles {
    right: -35px;
  }
}

@media (max-width: 576px) {
  .about-subtitle-main::before {
    right: -30px;
    width: 20px;
    height: 20px;
  }
  
  .about-subtitle-main::after {
    right: -25px;
    border-left-width: 5px;
    border-top-width: 4px;
    border-bottom-width: 4px;
  }
  
  .about-subtitle-main:hover::before {
    right: -35px;
  }
  
  .about-subtitle-main:hover::after {
    right: -20px;
  }
  
  .click-particles {
    right: -30px;
  }
}

.about-title-main {
  font-size: 42px;
  font-weight: 800;
  color: var(--dark-blue);
  margin: 0 0 25px 0;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.about-title-main .highlight-main {
  color: var(--primary-blue);
}

.about-description-main {
  font-size: 18px;
  line-height: 1.8;
  color: var(--text-light);
  margin: 0 0 35px 0;
  font-weight: 400;
}

.about-description-main strong {
  color: var(--dark-blue);
  font-weight: 600;
}

.about-button-main {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--white);
  padding: 15px 35px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(10, 25, 49, 0.3);
  border: 2px solid rgba(10, 25, 49, 0.2);
  cursor: pointer;
}

.about-button-main:hover {
  background: linear-gradient(135deg, var(--dark-blue), var(--primary-blue));
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(10, 25, 49, 0.4);
  border-color: var(--primary-blue);
}

.about-button-main i {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.about-button-main:hover i {
  transform: rotate(-30deg);
}

/* Stats Section - White Background with Dark Blue Details */
.stats-section-main {
  padding: 60px 0;
  background: var(--white);
}

.stats-container-main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}

.stat-item-main {
  padding: 30px 20px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(30, 60, 114, 0.05), rgba(42, 82, 152, 0.1));
  transition: transform 0.3s ease;
  border: 2px solid rgba(42, 82, 152, 0.2);
  backdrop-filter: blur(10px);
}

.stat-item-main:hover {
  transform: translateY(-5px);
  border-color: var(--primary-blue);
  box-shadow: 0 15px 35px rgba(30, 60, 114, 0.15);
  background: linear-gradient(135deg, rgba(30, 60, 114, 0.1), rgba(42, 82, 152, 0.15));
}

.stat-number-main {
  font-size: 36px;
  font-weight: 800;
  color: var(--primary-blue);
  margin-bottom: 10px;
  display: block;
  text-shadow: 0 2px 10px rgba(30, 60, 114, 0.1);
}

.stat-label-main {
  font-size: 16px;
  color: var(--secondary-blue);
  font-weight: 500;
}

/* Enhanced Responsive Design for About Section */
@media (max-width: 992px) {
  .about-container-main {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 150px 0px;
  }

  .about-image-main {
    height: 400px;
  }

  .about-title-main {
    font-size: 36px;
  }

  .stats-container-main {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  /* Tablet frame adjustments */
  .tablet-frame {
    max-width: 180px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -200px;
  }

  .tablet-frame img {
    width: 600px;
  }

  .video-stats-badges {
    bottom: -30px;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .stat-badge {
    padding: 10px 16px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .about-section-main {
    padding: 80px 0;
  }

  .about-image-main {
    height: 350px;
  }

  .about-title-main {
    font-size: 32px;
  }

  .about-description-main {
    font-size: 16px;
  }

  .corner-accent-main {
    width: 80px;
    height: 80px;
  }

  .stats-container-main {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Enhanced tablet frame for tablets */
  .tablet-frame {
    max-width: 150px;
    height: 450px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -150px;
  }

  .tablet-frame img {
    width: 500px;
  }

  .video-stats-badges {
    bottom: -20px;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .stat-badge {
    padding: 8px 14px;
    font-size: 11px;
  }

  /* About content adjustments */
  .about-content-section-main {
    text-align: center;
  }

  .about-button-main {
    display: inline-block;
    margin: 0 auto;
  }
}

@media (max-width: 576px) {
  .about-section-main {
    padding: 60px 0; 
  }

  .about-title-main {
    font-size: 28px;
  }

  .about-description-main {
    font-size: 15px;
  }

  .about-button-main {
    padding: 12px 25px;
    font-size: 14px;
  }

  .corner-accent-main {
    width: 60px;
    height: 60px;
  }

  /* Mobile tablet frame */
  .tablet-frame {
    max-width: 120px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -100px;
  }

  .tablet-frame img {
    width: 400px;
  }

  .video-stats-badges {
    bottom: -15px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .stat-badge {
    padding: 6px 12px;
    font-size: 10px;
  }

  /* Mobile content adjustments */
  .about-content-section-main {
    text-align: center;
    padding: 0 15px;
  }

  .about-subtitle-main {
    font-size: 14px;
  }

  .about-button-main {
    display: inline-block;
    margin: 20px auto 0;
    width: auto;
  }

  /* Cursor adjustments for mobile */
  .about-subtitle-main::before {
    width: 25px;
    height: 25px;
    right: -35px;
  }

  .about-subtitle-main::after {
    right: -30px;
    border-left-width: 6px;
    border-top-width: 5px;
    border-bottom-width: 5px;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .about-section-main {
    padding: 50px 0;
  }

  .about-title-main {
    font-size: 24px;
    line-height: 1.3;
  }

  .about-description-main {
    font-size: 14px;
    line-height: 1.6;
  }

  .tablet-frame {
    max-width: 100px;
    height: 350px;
    margin-top: -80px;
  }

  .tablet-frame img {
    width: 350px;
  }

  .video-stats-badges {
    bottom: -10px;
    gap: 6px;
  }

  .stat-badge {
    padding: 5px 10px;
    font-size: 9px;
  }

  .about-button-main {
    padding: 10px 20px;
    font-size: 13px;
  }
}




/* Professional Banner Styles */
.professional-banner {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
  padding: 40px 0;
  position: relative;
  overflow: hidden;
  margin: 40px 0;
}

/* Background Pattern */
.professional-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.2) 2px, transparent 2px),
    radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.25) 3px, transparent 3px);
  background-size: 150px 150px, 120px 120px, 200px 200px;
  animation: bannerDots 15s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bannerDots {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-10px, -5px) scale(1.05); }
}

/* Banner Content */
.banner-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 10;
}

/* Banner Text Section */
.banner-text {
  text-align: center;
  margin-bottom: 40px;
}

.banner-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 15px;
  font-family: 'Tajawal', sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 
    0 0 20px rgba(255, 255, 255, 0.4),
    0 4px 15px rgba(0, 0, 0, 0.5);
  animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% { 
    text-shadow: 
      0 0 20px rgba(255, 255, 255, 0.4),
      0 4px 15px rgba(0, 0, 0, 0.5);
  }
  50% { 
    text-shadow: 
      0 0 30px rgba(255, 255, 255, 0.7),
      0 4px 20px rgba(0, 0, 0, 0.6);
  }
}

.banner-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  font-family: 'Tajawal', sans-serif;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Process Steps Layout */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

/* Step Item */
.step-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 25px 15px;
  text-align: center;
  position: relative;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
  animation: stepFloat 8s ease-in-out infinite;
}

.step-item:nth-child(1) { animation-delay: 0s; }
.step-item:nth-child(2) { animation-delay: 1s; }
.step-item:nth-child(3) { animation-delay: 2s; }
.step-item:nth-child(4) { animation-delay: 3s; }

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

/* Step Number */
.step-number {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 900;
  color: #ffffff;
  font-family: 'Tajawal', sans-serif;
  animation: numberPulse 4s ease-in-out infinite;
}

@keyframes numberPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
  }
  50% { 
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1);
  }
}

/* Step Icon */
.step-icon {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px auto 15px;
  font-size: 1.8rem;
  color: #ffffff;
  transition: all 0.6s ease;
  position: relative;
  animation: iconPulse 4s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.1);
  }
}

/* Step Title */
.step-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 12px;
  font-family: 'Tajawal', sans-serif;
  transition: all 0.3s ease;
}

/* Step Description */
.step-description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  font-family: 'Tajawal', sans-serif;
  margin: 0;
}

/* Hover Effects */
.step-item:hover {
  transform: translateY(-12px) scale(1.02);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 15px 30px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(255, 255, 255, 0.2),
    inset 0 0 15px rgba(255, 255, 255, 0.05);
}

.step-item:hover .step-icon {
  transform: scale(1.1) rotateY(360deg);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 
    0 10px 20px rgba(255, 255, 255, 0.3),
    0 0 15px rgba(255, 255, 255, 0.2);
}

.step-item:hover .step-title {
  transform: translateY(-2px);
  text-shadow: 0 3px 12px rgba(255, 255, 255, 0.4);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .banner-title {
    font-size: 2rem;
  }
  
  .professional-banner {
    padding: 30px 0;
  }
}

@media (max-width: 768px) {
  .process-steps {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .banner-title {
    font-size: 1.8rem;
  }
  
  .banner-subtitle {
    font-size: 1rem;
  }
  
  .step-item {
    padding: 20px 12px;
  }
  
  .step-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  
  .step-number {
    width: 30px;
    height: 30px;
    font-size: 1rem;
  }
  
  .professional-banner {
    padding: 25px 0;
  }
}