| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| .presentation-container { | |
| width: 100vw; | |
| height: 100vh; | |
| display: flex; | |
| overflow-x: scroll; | |
| scroll-snap-type: x mandatory; | |
| scroll-behavior: smooth; | |
| } | |
| .slide { | |
| min-width: 100vw; | |
| height: 100vh; | |
| scroll-snap-align: start; | |
| padding: 4rem; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| position: relative; | |
| } | |
| .slide-content { | |
| max-width: 900px; | |
| width: 100%; | |
| } | |
| .solution-card { | |
| background: #f8fafc; | |
| padding: 2rem; | |
| border-radius: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .benefit-card { | |
| background: #f8fafc; | |
| padding: 1.5rem; | |
| border-radius: 0.5rem; | |
| text-align: center; | |
| } | |
| .nav-controls { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| display: flex; | |
| z-index: 100; | |
| } | |
| .nav-btn { | |
| background: #3b82f6; | |
| color: white; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| cursor: pointer; | |
| border: none; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Billing page styles */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 80px auto 20px; | |
| padding: 0 15px; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| th, td { | |
| padding: 12px 15px; | |
| text-align: left; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| th { | |
| background-color: #f8f9fa; | |
| font-weight: 600; | |
| } | |
| tr:hover { | |
| background-color: #f5f5f5; | |
| } | |
| .send-whatsapp, .group-send, #batch-send { | |
| transition: all 0.3s ease; | |
| } | |
| .send-whatsapp:hover, .group-send:hover, #batch-send:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1); | |
| } | |
| /* Animation classes */ | |
| .fade-in { | |
| animation: fadeIn 1s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .slide-up { | |
| animation: slideUp 0.8s ease-out; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| transform: translateY(20px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } |