:root {
   --primary: #1e824c;
 }

 .text-primary {
   color: var(--primary);
 }

 .bg-primary {
   background-color: var(--primary);
 }

 .border-primary {
   border-color: var(--primary);
 }


 html,
 body {
   overflow-x: hidden;
 }

 .glassmorphism-card {
   background: #ffffffb3;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, .3);
   border-radius: 1rem;
   padding: 1.5rem;
   box-shadow: 0 8px 32px #0b2c4d1a;
 }

 .nav-link.active {
   background: #ffffff;
   color: #116AA1;
   font-weight: 500;
   box-shadow: 0 8px 30px rgba(17, 106, 161, .10);
 }

 .header-scrolled {

   background: rgba(243, 250, 253, .96);
   backdrop-filter: blur(16px);
   box-shadow: 0 12px 40px rgba(0, 0, 0, .06);

 }


 .nav-link {
   position: relative;
   color: #374151;
   font-weight: 500;
   transition: 0.3s;
 }

 .nav-link:hover,
 .nav-link.active {
   /* color: #D32F2F; */
   color: #116AA1;
 }

 .nav-link::after {
   content: "";
   position: absolute;
   width: 0;
   height: 2px;
   left: 50%;
   bottom: -8px;
   /* background: #D32F2F; */
   background: #116AA1;
   transform: translateX(-50%);
   transition: .3s;
 }

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

 /* .header-scrolled {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
} */



 /* Infrastructure */
 .infra-item {
   display: flex;
   flex-direction: column;
   /* gap: 4px; */
   padding: 4px 10px;
   background: #fff;
   border: 1px solid #e5e7eb;
   border-radius: 14px;
   font-weight: 600;
   color: #111827;
   transition: .3s ease;
 }

 .infra-item span {
   font-size: 14px;
   font-weight: 500;
   color: #6b7280;
 }

 .infra-item:hover {
   transform: translateY(-4px);
   border-color: #E46236;
   box-shadow: 0 15px 35px rgba(211, 47, 47, .12);
 }




 /* Slider */
 /* ==========================================================
   PREMIUM HERO SLIDER
========================================================== */

 /* Hero Height */
 #hero-slider {
   height: calc(100vh - 88px);
   min-height: 700px;
   overflow: hidden;
   position: relative;
 }

 /* Slide */
 .slide {
   opacity: 0;
   visibility: hidden;
   transition: opacity .9s ease,
     visibility .9s ease;
 }

 .slide.active {
   opacity: 1;
   visibility: visible;
   z-index: 2;
 }

 /* Dark Gradient Overlay */
 .slide::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(235, 241, 245, 0.15) 0%, rgba(210, 225, 235, 0.10) 35%, rgba(190, 210, 225, 0.05) 60%, rgba(255, 255, 255, 0.00) 100%);

   /* background:
    linear-gradient(90deg,
      rgba(3, 17, 29, .78) 0%,
      rgba(8, 29, 45, .60) 35%,
      rgba(7, 22, 33, .40) 60%,
      rgba(0, 0, 0, .55) 100%); */
   z-index: 1;
 }

 /* Background Zoom Animation */
 .scale-bg {
   animation: kenburns 12s linear infinite alternate;
 }

 @keyframes kenburns {

   from {
     transform: scale(1);
   }

   to {
     transform: scale(1.12);
   }

 }

 /* Content */
 .slide-content {
   position: relative;
   z-index: 5;
   animation: fadeLeft 1s ease;
 }

 @keyframes fadeLeft {

   from {
     opacity: 0;
     transform: translateX(-60px);
   }

   to {
     opacity: 1;
     transform: translateX(0);
   }

 }

 /* Product Image */
 .banner-image {

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

   transition: .5s;

 }

 @keyframes floatImage {

   0% {
     transform: translateY(0);
   }

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

   100% {
     transform: translateY(0);
   }

 }

 /* Product Hover */
 .banner-image:hover {

   transform: scale(1.03);

 }

 /* Heading */
 .slide-content h1 {

   /* text-shadow:0 10px 30px rgba(0, 0, 0, .35); */

 }

 /* Paragraph */

 .slide-content p {

   color: #d8e3ea;

 }

 /* Glass Badge */

 .slide-content span {

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

   /* backdrop-filter: blur(14px); */

 }

 /* Buttons */

 .slide-content a {

   transition: .35s;

   font-weight: 500;

   letter-spacing: .5px;

 }

 .slide-content a:first-child {

   box-shadow:
     0 18px 40px rgba(17, 106, 161, .35);

 }

 .slide-content a:first-child:hover {

   transform: translateY(-4px);

   box-shadow:
     0 24px 45px rgba(17, 106, 161, .45);

 }

 .slide-content a:last-child:hover {

   transform: translateY(-4px);

 }

 /* Navigation */

 #prev,
 #next {

   transition: .35s;

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

 }

 #prev:hover,
 #next:hover {

   transform:
     translateY(-50%) scale(1.08);

 }

 /* Indicators */

 .indicator {

   position: relative;

   overflow: hidden;

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

   transition: .4s;

 }

 .indicator.active {

   background: #ffffff;

 }

 .indicator.active::before {

   content: "";

   position: absolute;

   left: 0;
   top: 0;

   width: 100%;
   height: 100%;

   background: #116AA1;

   animation: progress 3s linear;

 }

 @keyframes progress {

   from {

     width: 0%;

   }

   to {

     width: 100%;

   }

 }

 /* Decorative Glow */

 .slide-content {
   position: relative;
   z-index: 5;
   animation: fadeUp 1s ease;
 }

 @keyframes fadeUp {
   from {
     opacity: 0;
     transform: translateY(40px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .slide-content::before {

   content: "";

   position: absolute;

   width: 220px;
   height: 220px;

   border-radius: 50%;

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

   filter: blur(90px);

   left: -60px;
   top: -60px;

   z-index: -1;

 }

 /* Mobile */

 @media(max-width:1024px) {

   #hero-slider {

     min-height: 650px;

   }

   .slide-content {

     text-align: center;

     display: flex;

     flex-direction: column;

     align-items: center;

   }

   .slide-content h1 {

     font-size: 42px;
     line-height: 1.15;

   }

   .slide-content p {

     font-size: 16px;

     max-width: 550px;

   }

 }

 /* Small Devices */

 @media(max-width:640px) {

   #hero-slider {

     min-height: 620px;

   }

   .slide-content h1 {

     font-size: 34px;

   }

   .slide-content p {

     font-size: 15px;

   }

   #prev,
   #next {

     width: 46px;
     height: 46px;

   }

   .indicator {

     width: 36px;

   }

 }