.feature-card {
   border: none;
   border-radius: 12px;
   box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
   }
   .feature-card:hover {
   transform: translateY(-5px);
   box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
   }
   /* Base hidden state */
   .card-animate {
   opacity: 0;
   transform: translateY(40px);
   transition: all 0.8s ease-in-out;
   }
   /* Show when active */
   .card-animate.active {
   opacity: 1;
   transform: translateY(0);
   }
   /* Variations */
   .card-animate-left {
   transform: translateX(-50px);
   }
   .card-animate-right {
   transform: translateX(50px);
   }
   .card-animate-zoom {
   transform: scale(0.85);
   }
   /* Bubble / fade-in animation */
   .bubble-fade {
   opacity: 0;
   transform: translateY(20px) scale(0.9);
   transition: all 0.6s ease-out;
   }
   .bubble-fade.show {
   opacity: 1;
   transform: translateY(0) scale(1);
   }
   /* Stagger delay for each list item */
   .bubble-fade:nth-child(1) {
   transition-delay: 0.1s;
   }
   .bubble-fade:nth-child(2) {
   transition-delay: 0.3s;
   }
   .bubble-fade:nth-child(3) {
   transition-delay: 0.5s;
   }
   .bubble-fade:nth-child(4) {
   transition-delay: 0.7s;
   }
   .bubble-fade:nth-child(5) {
   transition-delay: 0.9s;
   }
   .list-point {
   list-style: none;
   padding-left: 0;
   margin: 0;
   }
   .list-point li {
   position: relative;
   padding-left: 30px; /* space for the circle */
   margin-bottom: 10px; /* spacing between items */
   }
   /* Add circle with checkmark */
   .list-point li::before {
   content: "✔"; /* checkmark */
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 20px;
   height: 20px;
   border: 2px solid blue; /* circle border color */
   border-radius: 50%; /* makes it a circle */
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   color: blue; /* checkmark color */
   font-weight: bold;
   }
   .process-step {
   cursor: pointer;
   transition: transform 0.3s ease, color 0.3s ease;
   }
   .process-step:hover {
   transform: translateY(-6px);
   }
   .process-step .circle {
   width: 180px;
   height: 180px;
   background-color: #ffffff;
   border: 2px solid #cfe0fd;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.4s ease;
   box-shadow: 0 4px 10px rgba(0,0,0,0.05);
   overflow: hidden; /* Ensures image stays inside */
   padding: 10px; /* 10px space between image and border */
   }
   .process-step .circle:hover {
   background-color: #2563eb;
   }
   .process-step:hover .circle {
   transform: scale(1.05);
   }
   .process-step.active .circle {
   background-color: #2563eb;
   border-color: #2563eb;
   box-shadow: 0 0 15px rgba(37,99,235,0.4);
   }
   .process-step.active h6 {
   color: #2563eb;
   }
   .circle img {
   width: 100%;
   height: 100%;
   object-fit: contain; /* Keeps image ratio inside circle */
   transition: filter 0.4s ease, transform 0.3s ease;
   z-index: 2;
   }
   .process-step:hover .circle img {
   transform: scale(1.05);
   z-index: 2;
   }
   .process-step:not(.active) .circle img {
   filter: none; /* Normal color */
   }
   /* Line behind circles */
   .process-line {
   position: relative;
   width: 100%;
   height: 3px;
   background-color: #cfe0fd;
   top: 100px;
   left: 0;
   }
   
   
   .bg-gradient-section-gary {
    background: linear-gradient(90deg, #c0e0ff 0%, #d9f0ff 100%);
    padding: 4rem 2rem;
    border-radius: 0.5rem;
}
.nav-link-container {
    font-size: 18px;
    color: #000;
}
   /* Active step styling already handled */
   @media (max-width: 676px) {
   .feature-card img {
   max-width: 50px;  /* adjust as needed */
   height: auto;
   }
   
   .process-step .circle {
   width: 80px;
   height: 80px;
   }
   
   .process-line {
	   display:none;
   }
   
       .nav-link-container {
        font-size: 16px !important;
    }
	    .nav-pills-container .nav-item-container {
        text-align: left;
    }
   }