.vrilex-service-banner {
     width: 100%;
     min-height: 388px;
     position: relative;
     display: flex;
     align-items: center;
     overflow: hidden;
     text-align: center;

     /* MAIN GRADIENT */
     background: linear-gradient(120deg,
             #020D1A 20%,
             #023859 50%,
             #A7EBF2 140%);
 }

 /* DARK OVERLAY (important for text readability) */
 .vrilex-service-banner::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(to right,
             rgba(2, 13, 26, 0.95),
             rgba(2, 13, 26, 0.8),
             rgba(2, 13, 26, 0.3),
             transparent);
 }

 /* CONTENT */
 .vrilex-service-content {
     position: relative;
     z-index: 1;
     max-width: 700px;
 }

 /* TITLE */
 .vrilex-service-title {
     font-size: 32px;
     font-weight: 700;
     line-height: 130%;
     color: #ffffff;
     margin-bottom: 16px;
 }

 /* DESCRIPTION */
 .vrilex-service-desc {
     font-size: 16px;
     line-height: 140%;
     color: rgba(255, 255, 255, 0.75);
 }

 /* ===== OPTIONAL: subtle glow accent ===== */
 .vrilex-service-banner::after {
     content: "";
     position: absolute;
     width: 400px;
     height: 400px;
     background: #A7EBF2;
     filter: blur(120px);
     opacity: 0.2;
     right: -100px;
     bottom: -100px;
 }

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

 /* Tablet */
 @media (max-width: 992px) {
     .vrilex-service-title {
         font-size: 26px;
     }
 }

 /* Mobile */
 @media (max-width: 576px) {
     .vrilex-service-banner {
         padding: 40px 15px;
     }

     .vrilex-service-title {
         font-size: 22px;
     }

     .vrilex-service-desc {
         font-size: 14px;
     }
 }


 /* Section 2 */
 .vrilex-services-overview {
     padding: 80px 0;
     background: #ffffff;
 }

 /* HEADER */
 .vrilex-services-title {
     font-size: 28px;
     font-weight: 700;
     color: #023859;
     margin-bottom: 10px;
 }

 .vrilex-services-subtitle {
     font-size: 16px;
     color: #5f7c87;
     max-width: 700px;
     margin: auto;
     margin-bottom: 50px;
 }

 /* GRID */
 .vrilex-services-grid .col-md-4 {
     margin-bottom: 25px;
 }

 /* SERVICE ITEM */
 .vrilex-service-item {
     text-align: center;
     padding: 30px 20px;
     border-radius: 12px;
     transition: all 0.3s ease;
     border: 1px solid rgba(0, 0, 0, 0.05);
 }

 /* ICON */
 .vrilex-service-icon {
     font-size: 32px;
     margin-bottom: 12px;
 }

 /* TITLE */
 .vrilex-service-item h3 {
     font-size: 16px;
     font-weight: 600;
     color: #023859;
 }

 /* HOVER EFFECT */
 .vrilex-service-item:hover {
     transform: translateY(-6px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }

 /* ===== RESPONSIVE ===== */
 @media (max-width: 768px) {
     .vrilex-services-title {
         font-size: 22px;
     }

     .vrilex-services-subtitle {
         font-size: 14px;
     }
 }

 /* Section 2 */

 .vs-section {
     background: #f4f9fb;
     padding: 60px 20px;
 }

 .vs-header {
     margin-bottom: 56px;
 }

 .vs-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: #54ACBF;
     margin-bottom: 14px;
 }

 .vs-eyebrow-line {
     width: 28px;
     height: 1.5px;
     background: #54ACBF;
     border-radius: 2px;
     display: inline-block;
 }

 .vs-title {
     font-size: 36px;
     font-weight: 700;
     color: #020D1A;
     letter-spacing: -0.02em;
     line-height: 1.15;
     margin-bottom: 14px;
 }

 .vs-title span {
     color: #54ACBF;
 }

 .vs-subtitle {
     font-size: 16px;
     font-weight: 400;
     color: #5f7c8a;
     /* max-width: 520px; */
     margin: 0 auto;
     line-height: 1.7;
 }

 .vs-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
 }

 .vs-card {
     background: #fff;
     border: 1px solid rgba(2, 13, 26, 0.06);
     border-radius: 16px;
     padding: 28px 24px;
     display: flex;
     flex-direction: column;
     transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
     position: relative;
     overflow: hidden;
     cursor: pointer;
 }

 .vs-card::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(167, 235, 242, 0.06) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.3s ease;
     border-radius: 16px;
 }

 .vs-card:hover {
     box-shadow: 0 20px 48px rgba(2, 56, 89, 0.1);
     border-color: rgba(84, 172, 191, 0.35);
 }

 .vs-card:hover::before {
     opacity: 1;
 }

 .vs-card:hover .vs-icon-wrap {
     background: #023859;
 }

 .vs-card:hover .vs-icon-wrap svg path,
 .vs-card:hover .vs-icon-wrap svg rect,
 .vs-card:hover .vs-icon-wrap svg circle {
     stroke: #A7EBF2;
 }

 .vs-card:hover .vs-num {
     color: rgba(84, 172, 191, 0.15);
 }

 .vs-card:hover .vs-card-link {
     gap: 9px;
     color: #023859;
 }

 .vs-card:hover .vs-card-link .arr {
     transform: translateX(3px);
 }

 .vs-num {
     position: absolute;
     top: 16px;
     right: 20px;
     font-size: 42px;
     font-weight: 700;
     color: rgba(2, 13, 26, 0.04);
     line-height: 1;
     transition: color 0.3s ease;
     user-select: none;
 }

 .vs-icon-wrap {
     width: 46px;
     height: 46px;
     border-radius: 12px;
     background: #eef7fa;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
     transition: background 0.3s ease;
     position: relative;
     z-index: 1;
 }

 .vs-card-tag {
     font-size: 12px;
     font-weight: 500;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: #54ACBF;
     margin-bottom: 6px;
     position: relative;
     z-index: 1;
 }

 .vs-card-title {
     font-size: 20px;
     font-weight: 700;
     color: #020D1A;
     margin-bottom: 10px;
     line-height: 1.3;
     letter-spacing: -0.01em;
     position: relative;
     z-index: 1;
 }

 .vs-card-desc {
     font-size: 16px;
     font-weight: 400;
     color: #5f7c8a;
     line-height: 1.65;
     margin-bottom: 20px;
     flex: 1;
     position: relative;
     z-index: 1;
 }

 .vs-pills {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     margin-bottom: 20px;
     position: relative;
     z-index: 1;
 }

 .vs-pill {
     background: #eef7fa;
     color: #3a8fa0;
     font-size: 12px;
     padding: 3px 10px;
     border-radius: 100px;
     border: 1px solid rgba(84, 172, 191, 0.2);
 }

 .vs-card-link {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: 13px;
     font-weight: 500;
     color: #54ACBF;
     text-decoration: none;
     transition: gap 0.25s, color 0.25s;
     position: relative;
     z-index: 1;
 }

 .vs-card-link .arr {
     transition: transform 0.25s;
     display: inline-block;
 }

 @media (max-width: 992px) {
     .vs-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 576px) {
     .vs-grid {
         grid-template-columns: 1fr;
     }

     .vs-title {
         font-size: 26px;
     }
 }