/* ============================================================ SERVICES SECTION — services.css in ============================================================ */ *, *::before, *::after { box-sizing: border-box; } .srv-section { background: linear-gradient(to right, #ffffff 0%, #ffffff 40%, #ffffff 100%); padding: 55px 30px 60px; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } .srv-wrapper { max-width: 1260px; margin: 0 auto; display: flex; align-items: center; gap: 14px; } /* Arrow buttons */ .srv-btn { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.10); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, border-color .2s; } .srv-btn:hover:not(:disabled) { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.7); } .srv-btn:disabled { opacity: 0.25; cursor: default; } /* Overflow clip */ .srv-clip { flex: 1; overflow: hidden; } /* Track */ .srv-track { display: flex; gap: 20px; transition: transform 0.42s cubic-bezier(0.25,0.46,0.45,0.94); } /* Card base */ .srv-card { flex: 0 0 calc((100% - 60px) / 4); background: #fff; border-radius: 16px; padding: 44px 24px 36px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.13); transition: box-shadow .25s, transform .25s; } .srv-card:hover { box-shadow: 0 10px 36px rgba(0,0,0,0.22); transform: translateY(-4px); } /* Active card */ .srv-card.active { background: #1b3f7a; } /* Hexagon */ .srv-hex { width: 118px; height: 118px; clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); background: #eef2f7; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; flex-shrink: 0; } .srv-card.active .srv-hex { background: #fff; } .srv-hex svg, .srv-hex img { width: 62px; height: 62px; object-fit: contain; } /* Title */ .srv-title { font-size: 17px; font-weight: 700; color: #0f172a; margin-bottom: 14px; line-height: 1.3; } .srv-card.active .srv-title { color: #fff; } /* Description */ .srv-desc { font-size: 13.5px; line-height: 1.72; color: #64748b; margin-bottom: 28px; flex: 1; } .srv-card.active .srv-desc { color: rgba(255,255,255,0.70); } /* Read More button */ .srv-readmore { display: inline-block; padding: 10px 36px; background: #29aae1; color: #fff; font-size: 14px; font-weight: 600; border-radius: 100px; text-decoration: none; transition: background .2s, box-shadow .2s; box-shadow: 0 3px 12px rgba(41,170,225,0.35); white-space: nowrap; margin-top: auto; } .srv-readmore:hover { background: #1a90c8; box-shadow: 0 5px 18px rgba(41,170,225,0.5); color: #fff; } /* Dots */ .srv-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; } .srv-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,0.30); cursor: pointer; transition: background .25s, width .25s; padding: 0; } .srv-dot.on { background: #29aae1; width: 24px; border-radius: 100px; } /* Responsive */ @media (max-width: 900px) { .srv-card { flex: 0 0 calc((100% - 20px) / 2); } } @media (max-width: 540px) { .srv-card { flex: 0 0 100%; } }