/* ===== COMPARISON CARDS ===== */ .compare-card { border-radius: 37px; border: 2px solid rgba(255, 255, 255, 0.50); opacity: 0.8; background: #2D2D2D; padding: 28px 24px; text-align: center; transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); position: relative; overflow: hidden; width: 272px; height: 280px; } .compare-card:hover { transform: translateY(-4px); border: 2px solid #93FFDE; opacity: 0.8; } /* Scale House card - highlighted */ .compare-card-featured:first-child { border-radius: 37px; border: 2px solid #93FFDE; opacity: 0.8; } .compare-card-featured { border-radius: 37px; border: 2px solid rgba(255, 255, 255, 0.50); opacity: 0.8; background: #2D2D2D; } /* ===== TABLE LAYOUT - FIXED ===== */ .comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; } .comparison-table thead th { text-align: center; padding: 16px 12px; font-weight: 600; color: #fff; font-size: 14px; } .comparison-table thead th:first-child { text-align: left; width: 140px; } .comparison-table tbody td { padding: 20px 12px; text-align: center; border-bottom: 1px solid #E3E3E380; vertical-align: middle; } .comparison-table tbody td:first-child { text-align: left; color: #FFF; font-family: Poppins; font-size: 20px; font-style: normal; font-weight: 400; line-height: 120%; text-transform: capitalize; width: 31%; } .comparison-table tbody tr:last-child td { border-bottom: none; } .comparison-table tbody tr:hover td { background: rgba(255, 255, 255, 0.01); } /* ===== CHECK / CROSS ICONS ===== */ .icon-check { width: 26px; height: 26px; border-radius: 50%; background: #31DFAA; display: inline-flex; align-items: center; justify-content: center; } .icon-cross { width: 26px; height: 26px; border-radius: 50%; background:#212121; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #212121; } /* ===== SCALE HOUSE LOGO ===== */ .logo-scale { font-weight: 900; letter-spacing: -1px; line-height: 0.9; text-transform: uppercase; color: #10FFBE; font-size: 28px; } .logo-scale span { display: block; } /* ===== MOBILE SLIDER ===== */ .mobile-slider-container { display: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 20px; gap: 16px; } .mobile-slider-container::-webkit-scrollbar { display: none; } .mobile-slide-card { scroll-snap-align: center; flex: 0 0 100%; width: 342px; height: auto; border-radius: 37px; border: 2px solid #93FFDE; opacity: 0.8; background: linear-gradient(180deg, #1A1B1C 14.42%, #4A5053 100%); padding: 28px 24px; text-align: center; position: relative; overflow: hidden; } .mobile-slide-card.featured { border: 2px solid #93FFDE; opacity: 0.8; background: linear-gradient(180deg, #1A1B1C 14.42%, #4A5053 100%); } /* Mobile feature list inside cards */ .mobile-feature-list { margin-top: 20px; text-align: left; } .mobile-feature-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .mobile-feature-item:last-child { border-bottom: none; }  /* ===== MOBILE SLIDER ===== */ .mobile-slider-container { display: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 20px; gap: 16px; padding-left: 16px; padding-right: 16px; } .mobile-slider-container::-webkit-scrollbar { display: none; } /* Mobile feature list inside cards */ .mobile-feature-list { margin-top: 20px; text-align: left; } .mobile-feature-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .mobile-feature-item:last-child { border-bottom: none; } /* ===== ANIMATIONS ===== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeInUp 0.6s ease forwards; opacity: 0; } .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } /* ===== RESPONSIVE TABLE ===== */ @media (max-width: 640px) { .comparison-table thead th:first-child, .comparison-table tbody td:first-child { width: 100px; font-size: 12px; } .comparison-table thead th, .comparison-table tbody td { padding: 14px 8px; font-size: 12px; } .icon-check, .icon-cross { width: 28px; height: 28px; margin: 0px; } .compare-card { padding: 20px 16px; border-radius: 18px; } .logo-scale { font-size: 22px; } }