.hero-right{
    display:flex;
    justify-content:flex-end;
    align-items:flex-start;
}

.hero-slider-container {
    position: relative;
    width: 530px; /* decreased width */
    height: 310px; /* decreased height */
    margin-top: 104px; /* aligned horizontally with hero heading */
    border-radius: 16px; /* matching feedback card */
    background: #ffffff; /* white background */
    border: 2px solid #A8F0F4; /* soft cyan border */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); /* soft shadow */
    overflow: hidden;
    padding: 20px 24px; /* compact padding */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slider-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
    border-color: #11d6d5;
}

.slider-track-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slider-slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.slider-slide.active {
    opacity: 1;
    transform: scale(1);
}

.service-slide-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

.service-slide-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 16px;
}

.service-slide-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(15, 62, 112, 0.08); /* soft professional shadow */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-slide-card:hover .service-slide-icon {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 28px rgba(15, 62, 112, 0.12);
}

/* Colors for specific services with professional gradients */
.icon-web {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(14, 165, 233, 0.2) 100%);
    color: #0ea5e9;
    border: 1px solid rgba(56, 189, 248, 0.3);
}
.web-service .service-slide-tag {
    color: #0ea5e9;
}

.icon-mobile {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(139, 92, 246, 0.2) 100%);
    color: #8b5cf6;
    border: 1px solid rgba(168, 85, 247, 0.3);
}
.mobile-service .service-slide-tag {
    color: #8b5cf6;
}

.icon-erp {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(234, 88, 12, 0.2) 100%);
    color: #ea580c;
    border: 1px solid rgba(249, 115, 22, 0.3);
}
.erp-service .service-slide-tag {
    color: #ea580c;
}

.icon-custom {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.2) 100%);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.custom-service .service-slide-tag {
    color: #16a34a;
}

/* ================= CUSTOM ICON MOCKUPS ================= */

/* Mini Phone / Mobile App Mockup */
.mini-phone {
    width: 26px;
    height: 42px;
    border: 2px solid currentColor;
    border-radius: 6px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.mini-phone-notch {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
    opacity: 0.8;
}
.mini-phone-screen {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mini-phone-screen i {
    font-size: 13px !important;
    color: inherit !important;
}
.mini-phone-home {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border: 1px solid currentColor;
    border-radius: 50%;
}

/* Mini Browser Mockup */
.mini-browser {
    width: 36px;
    height: 28px;
    border: 2px solid currentColor;
    border-radius: 4px;
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}
.mini-browser-header {
    height: 6px;
    background: currentColor;
    opacity: 0.15;
    display: flex;
    align-items: center;
    padding-left: 2px;
    gap: 1.5px;
    flex-shrink: 0;
}
.mini-dot {
    width: 1.5px;
    height: 1.5px;
    background: currentColor;
    border-radius: 50%;
}
.mini-browser-screen {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mini-browser-screen i {
    font-size: 11px !important;
    color: inherit !important;
}

/* Mini ERP / Dashboard Mockup */
.mini-dashboard {
    display: flex;
    align-items: center;
    gap: 4px;
}
.mini-db-header i {
    font-size: 16px !important;
    color: inherit !important;
}
.mini-db-bars {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 12px;
}
.mini-bar {
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    opacity: 0.8;
}
.mini-bar.b-1 { width: 60%; }
.mini-bar.b-2 { width: 100%; }
.mini-bar.b-3 { width: 40%; }

/* Mini Code Editor Mockup */
.mini-code {
    display: flex;
    align-items: center;
    gap: 4px;
}
.mini-code-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 12px;
}
.code-line {
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    opacity: 0.7;
}
.code-line.l-1 { width: 80%; }
.code-line.l-2 { width: 100%; }
.code-line.l-3 { width: 60%; }
.mini-code i {
    font-size: 12px !important;
    color: inherit !important;
}

.service-slide-title-info {
    display: flex;
    flex-direction: column;
}

.service-slide-tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}

.service-slide-header h3 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    color: #0F3E70; /* Deep blue for white card */
    margin: 0;
}

.service-slide-subtitle {
    font-size: 13px; /* increased to 13px */
    font-weight: 500;
    color: #667085; /* Medium gray */
    margin: 4px 0 0 0;
}

.service-slide-body {
    flex-grow: 1;
    margin-bottom: 12px; /* reduced from 15px */
}

.service-slide-desc {
    font-size: 14px; /* reduced from 15px */
    line-height: 1.5;
    color: #475467; /* Dark gray */
    margin: 0 0 12px 0; /* reduced margin from 20px */
}

.service-slide-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px; /* reduced gap */
}

.service-slide-features span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    color: #2d3748; /* Dark navy */
}

.service-slide-features i {
    color: #F79421;
    font-size: 14px;
}

.service-slide-footer {
    width: 100%;
}

.service-slide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px; /* reduced from 52px */
    padding: 0 20px; /* reduced padding */
    border-radius: 12px;
    background: #f4f7f9; /* Light solid background */
    border: 1px solid rgba(15, 62, 112, 0.1);
    color: #0F3E70; /* Deep blue */
    font-weight: 700;
    font-size: 13.5px; /* reduced from 14.5px */
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-sizing: border-box;
}

.service-slide-btn i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.service-slide-btn:hover {
    background: #0F3E70; /* Deep blue on hover */
    border-color: #0F3E70;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 62, 112, 0.15);
}

.service-slide-btn:hover i {
    transform: translateX(4px);
}

/* Arrows Navigation - Repositioned to top-right to prevent overlap */
.slider-arrow {
    position: absolute;
    top: 20px;
    transform: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9); /* Solid white */
    border: 1px solid rgba(15, 62, 112, 0.1);
    color: #0F3E70; /* Deep blue arrow */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.slider-arrow:hover {
    background: #0F3E70;
    border-color: #0F3E70;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 62, 112, 0.15);
}

.prev-btn {
    right: 56px;
    left: auto; /* Override absolute left */
}

.next-btn {
    right: 16px;
}

/* Dots Indicators */
.slider-dots {
    position: absolute;
    bottom: 8px; /* adjusted from 12px */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.slider-dots .slider-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15); /* Darker gray dots */
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dots .slider-dot.active {
    background: #0F3E70;
    transform: scale(1.4);
}

.metric-box {
    background: #f7fafc;
    padding: 12px 8px;
    border-radius: 12px;
    flex: 1;
   text-align: center;
}

.metric-box strong {
    display: block;
    font-size: 22px;
    color: #123d73;
    font-weight: 800;
}

.metric-box span {
    display: block;
    font-size: 10px;
    color: #718096;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-top: 3px;
}
/* RIGHT CARD */

.stat-item{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:28px;
}

.stat-icon{
    width:56px;
    height:56px;
    border-radius:50%;
    background:#eafcff;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#00bce8;
    font-size:22px;
    flex-shrink:0;
    transition:.35s;
}

.stat-item strong{
    display:block;
    font-size:22px;
    font-weight:800;
    color:#143d72;
}

.stat-item p{
    margin:0;
    color:#60728a;
    font-size:16px;
}

.hero-card::before{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    background:#c6f7ff;
    filter:blur(90px);
    opacity:.25;
    top:-120px;
    right:-120px;
    transition:.5s;
}

.hero-card:hover::before{
    opacity:.45;
    transform:scale(1.4);
}
/* Hero Uniform Premium Buttons */

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 34px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 220px;
    width: auto;
    height: 56px;
    padding: 0 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.hero-btn .btn-icon {
    font-size: 18px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Primary — warm gold gradient */

.hero-btn.primary {
    background: #F79421;
    color: #fff;
    box-shadow: 0 6px 20px rgba(247, 148, 33, 0.3);
}

.hero-btn.primary:hover {
    background: #11d6d5 !important;
    color: #0c3b65 !important; /* reverted from #0d4c71 */
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 14px 36px rgba(17, 214, 213, 0.4);
}

.hero-btn.primary:hover .btn-icon {
    transform: scale(1.2) rotate(-12deg);
}
/* Secondary — deep navy solid */

.hero-btn.secondary {
    background: #0c3b65; /* reverted from #0d4c71 */
    color: #fff;
    box-shadow: 0 6px 20px rgba(12, 59, 101, 0.3);
}

.hero-btn.secondary:hover {
    background: #11d6d5 !important;
    color: #0c3b65 !important; /* reverted from #0d4c71 */
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 14px 36px rgba(17, 214, 213, 0.45);
}

.hero-btn.secondary:hover .btn-icon {
    transform: scale(1.2) translateX(5px);
}

.hero{
    background:#ffffff;
     padding:30px 0 50px;
}
/* Grid */

.hero-grid{
position:absolute;
width:100%;
height:100%;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:60px 60px;
opacity:.45;
}
/* Glow Left */

.hero-glow-left{
position:absolute;
width:420px;
height:420px;
background:#22d2df;
filter:blur(180px);
opacity:.16;
left:-180px;
top:-100px;
animation:glow1 7s ease-in-out infinite;
}
/* Glow Right */

.hero-glow-right{
position:absolute;
width:380px;
height:380px;
background:#0dd6e5;
filter:blur(170px);
opacity:.12;
right:-120px;
bottom:-120px;
animation:glow2 8s ease-in-out infinite;
}
/* Badge */

.hero-badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 28px;
background:rgba(18,210,223,.15);
border:1px solid rgba(34,210,223,.35);
border-radius:40px;
font-size:13px;
font-weight:700;
letter-spacing:1px;
color:#23d5df;
margin-bottom:35px;
backdrop-filter:blur(10px);
}

.hero-badge i{
font-size:10px;
}