.sis-hover-card-grid { padding-top: 30px; padding-bottom: 30px; } .sis-hover-card-grid .row { display: flex !important; align-items: stretch !important; } .sis-hover-card-grid .row > [class*=\"col-\"] { transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; cursor: pointer; background-color: #ffffff !important; border: 1px solid #e6f0fa !important; border-radius: 12px !important; box-shadow: 0 4px 15px rgba(0, 37, 84, 0.08) !important; padding: 30px 20px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; min-height: 260px; text-align: center; position: relative; overflow: hidden; } .sis-hover-card-grid .row > [class*=\"col-\"] img { height: 80px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; margin-bottom: 16px !important; transition: filter 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; } .sis-hover-card-grid .row > [class*=\"col-\"] h3 { color: #0d71ba !important; font-size: 1.25rem !important; font-weight: 700 !important; margin-bottom: 0 !important; transition: color 0.4s ease !important; } .sis-hover-card-grid .row > [class*=\"col-\"] p { color: rgba(255, 255, 255, 0) !important; font-size: 0.9rem !important; line-height: 1.5 !important; margin-top: 0 !important; margin-bottom: 0 !important; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.4s ease, color 0.4s ease, margin-top 0.4s ease !important; } .sis-hover-card-grid .row > [class*=\"col-\"]:hover, .sis-hover-card-grid .row > [class*=\"col-\"].active { background-color: #0d71ba !important; border-color: #0d71ba !important; transform: translateY(-8px) !important; box-shadow: 0 12px 25px rgba(13, 113, 186, 0.3) !important; } .sis-hover-card-grid .row > [class*=\"col-\"]:hover h3, .sis-hover-card-grid .row > [class*=\"col-\"].active h3 { color: #ffffff !important; } .sis-hover-card-grid .row > [class*=\"col-\"]:hover p, .sis-hover-card-grid .row > [class*=\"col-\"].active p { color: #ffffff !important; opacity: 1 !important; max-height: 150px; margin-top: 12px !important; } .sis-hover-card-grid .row > [class*=\"col-\"]:hover img, .sis-hover-card-grid .row > [class*=\"col-\"].active img { /* filter: brightness(0) invert(1) !important; */ transform: scale(1.05) !important; }