.header{position:relative;padding-top:1rem;padding-bottom:1rem}.cards{background-color:#fff;border-radius:12px;box-shadow:0 4px 12px #0000000d;padding:2rem;transition:all .3s ease;height:100%;display:flex;flex-direction:column}.cards:hover{box-shadow:0 8px 24px #0000001a;transform:translateY(-5px)}.story-book-img{border-radius:8px;object-fit:cover;height:300px}.cards .btn{margin-top:auto}.input-group{box-shadow:0 4px 12px #00000014;border-radius:var(--text-60);overflow:hidden}.input-group-text{border-radius:50% 0 0 50%;border:none;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background-color:var(--primary-theme)}.form-control{border-radius:0 var(--text-60) var(--text-60) 0;border:1px solid #e2e8f0;padding:.75rem 1.25rem;font-size:var(--text-18);transition:all .3s ease;height:50px}.form-control:focus{border-color:var(--primary-theme);box-shadow:0 0 0 .2rem #c67c1926;outline:none}.form-select{border-radius:var(--text-60);border:1px solid #e2e8f0;padding:10px 30px;font-size:var(--text-18);transition:all .3s ease;height:50px;box-shadow:0 4px 12px #00000014}.form-select:focus{border-color:var(--primary-theme);box-shadow:0 0 0 .2rem #c67c1926;outline:none}.pagination{display:flex;justify-content:center;margin-top:3rem}.pagination .page-item .page-link{color:var(--light-black);border:none;margin:0 .35rem;border-radius:50%;width:45px;height:45px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;font-size:var(--text-18);font-weight:500;box-shadow:0 2px 8px #0000000d}.pagination .page-item.active .page-link{background-color:var(--primary-theme);color:#fff;box-shadow:0 4px 12px #c67c194d;transform:translateY(-2px)}.pagination .page-item .page-link:hover{background-color:var(--secondry-theme);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #74989e4d}.pagination .page-item.disabled .page-link{color:#ccc;pointer-events:none;box-shadow:none}.pagination .page-item:first-child .page-link,.pagination .page-item:last-child .page-link{font-size:var(--text-14);background-color:var(--secondry-theme);color:#fff}.pagination .page-item:first-child .page-link:hover,.pagination .page-item:last-child .page-link:hover{background-color:var(--primary-theme)}.pagination .page-item.disabled:first-child .page-link,.pagination .page-item.disabled:last-child .page-link{background-color:#e2e8f0;color:#999}.story-description{line-height:1.6}.story-characters{background-color:#f8f9fa;border-radius:8px;padding:1rem}.character-item{padding:.5rem 0;border-bottom:1px solid #e2e8f0}.character-item:last-child{border-bottom:none}.character-name{display:flex;align-items:center}.character-name i{font-size:1.2rem}.cursor-pointer{cursor:pointer}.character-name{justify-content:flex-start}.character-name .ms-auto{margin-left:auto}.story-btn{padding:var(--text-10) var(--text-20);font-size:var(--text-18);font-weight:500;border-radius:var(--text-60);transition:all .3s ease;border:none}.story-btn:hover{transform:translateY(-2px);box-shadow:0 4px 10px #0000001a}.btn-primary.story-btn{background-color:var(--primary-theme)}.btn-primary.story-btn:hover,.btn-secondary.story-btn{background-color:var(--secondry-theme)}.btn-secondary.story-btn:hover,.back-btn:hover{background-color:var(--primary-theme)}.continue-btn:hover{background-color:var(--secondry-theme)}.character-select-wrapper{position:relative}.character-select-wrapper:after{content:"";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;right:15px;top:50%;transform:translateY(-50%);color:#fff;pointer-events:none}.character-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding:8px 16px;font-size:var(--text-16);font-weight:500;transition:all .3s ease;cursor:pointer;min-width:180px;border:none}.character-select::-ms-expand{display:none}.character-select:hover{background-color:var(--primary-theme)!important;transform:translateY(-2px);box-shadow:0 4px 10px #0000001a}.character-select option{background-color:#fff;color:var(--light-black);font-size:var(--text-16)}.label{display:inline-block;border-radius:var(--text-60)}@media (max-width: 768px){.cards{padding:1.5rem}.cards img{height:250px}}@media (max-width: 576px){.cards img{height:200px}.pagination .page-item .page-link{width:35px;height:35px;font-size:var(--text-16)}}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.line-clamp-3 *{display:inline}.line-clamp-3 p{margin-bottom:0}.line-clamp-3 br{display:none}