#scrollToTop,.menu-toggle { display: none } body { background: #f5f5f5; font-family: sans-serif; margin: 0; padding: 0 } .package-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 20px; max-width: 1200px; margin: 30px auto; padding: 0 10px } .package-card { background-color: #fff; border-radius: 10px; min-height: 140px; box-shadow: 0 5px 20px rgba(0,0,0,.1); text-decoration: none; color: #1976d2; font-weight: 700; overflow: hidden; padding: 0; animation: .6s ease-out both fadeInUp; transition: box-shadow .3s,transform .3s } .package-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,.15); transform: scale(1.02) } .package-card-inner { padding: 20px; position: relative; z-index: 2; text-align: center } .package-card h6 { font-size: 12px; font-weight: 400; color: #444; margin-top: 10px; margin-bottom: 0 } .package-number { transition: color .3s; position: absolute; right: 0; bottom: 0; font-size: 130px; font-weight: 900; color: rgba(25,118,210,.06); z-index: 1; line-height: 1; pointer-events: none; margin: 0; padding: 0; transform: translate(8%,12%) } .package-card:hover .package-number { color: rgba(25,118,210,.12) } .package-title { display: inline-block; transition: color .3s,transform .3s; color: #0659a1; font-size: 15px } .package-card:hover .package-title { color: #073054 } .package-card { position: relative; display: block } .package-status { position: absolute; top: 10px; left: 10px; width: 12px; height: 12px; border-radius: 50%; background-color: #ccc; z-index: 10 } .site-branding,.site-footer,.site-main { background-color: #fff } .package-status.ok { background-color: #7bd57f } .package-status.partial { background-color: #eba30b } @media (max-width: 480px) { .package-number { transform:translate(10%,15%) } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } } .delay-1 { animation-delay: .1s } .delay-2 { animation-delay: .2s } .delay-3 { animation-delay: .3s } .delay-4 { animation-delay: .4s } .site-footer { text-align: center; padding: 10px 40px; font-size: 15px } .site-branding { align-items: center; padding: 15px 40px; text-align: center; font-size: 25px; font-weight: 700 } .site-title { padding-bottom: 10px; position: relative; display: inline-block; margin: 0 } .site-title::after { content: ''; position: absolute; width: 60%; height: 3px; background-color: #0a59a0; left: 50%; bottom: 0; transform: translateX(-50%); border-radius: 2px } #scrollToTop:hover { background-color: #777777db; transform: translateY(-2px) } #scrollToTop { position: fixed; bottom: 20px; right: 20px; width: 44px; height: 44px; min-width: 45px; background-color: #0006; color: #fff; font-size: 20px; border: none; border-radius: 6px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.2); z-index: 1000; transition: background-color .2s,transform .2s } .site-main { position: relative; width: auto; padding: 40px; margin: 20px auto; border-radius: 10px; max-width: 1400px } a { text-decoration: none; background-color: transparent; color: #0659a1 } a:hover,a:focus,a:active { color: #191970 } body,button,input,select,optgroup,textarea { font-size: 17px; line-height: 1.5; max-width: 100%; } @media (max-width: 600px) { body,button,input,select,optgroup,textarea { font-size:14px } .btn-diagnosis,.btn-service { min-width: 90px } } h1,h2,h3,h4,h5,h6 { clear: both } *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; } .screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important }