body { font-family: 'Poppins', sans-serif; background-color: #151f2d; color: #fff; padding: 50px 0; } .container { background-color: #1f2b3e; padding: 30px; border-radius: 8px; } h1 { font-weight: 600; font-size: 2.5rem; color: #775ae2; } .header { margin-bottom: 30px; } a { color: #775ae2; text-decoration: none; } a:hover { text-decoration: underline; } .carousel-item { text-align: center; } .carousel-item p { font-size: 1.1rem; overflow: hidden; transition: height 0.2s ease; } .carousel-item h5 { font-size: 1.2rem; margin-top: 10px; } .carousel-control-prev, .carousel-control-next { color: #fff !important; } .modal-content { background-color: #151f3d; } .modal-header { border-bottom: 1px solid rgba(130, 130, 130, 0.277); } .btn-review { margin-top: 20px; } .alert { display: none; position: fixed; top: 20px; right: 20px; padding: 15px; background-color: #28a745; color: #fff; border-radius: 5px; z-index: 1000; } /* Notification Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } } /* Notification Container */ #notification-container { position: fixed; top: 20px; right: 20px; z-index: 9999; pointer-events: none; display: flex; flex-direction: column; align-items: flex-end; } .notification-center { position: fixed; top: 20px; left: 50%; white-space: nowrap; transform: translateX(-50%); z-index: 9999; pointer-events: none; } .notification { display: flex; align-items: center; padding: 12px 16px; margin-bottom: 8px; border-radius: 4px; font-size: 15px; font-weight: 500; font-family: Poppins, sans-serif; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); background: white; max-width: 400px; pointer-events: auto; animation: fadeIn 0.3s ease-out; } .notification svg { width: 22px !important; height: 22px !important; margin-right: 12px; } .fa-shake, .fa-spin { animation-delay: var(--fa-animation-delay, 0s); animation-direction: var(--fa-animation-direction, normal); } .fa-spin { animation-name: fa-spin; animation-duration: var(--fa-animation-duration, 2s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, linear); } .fa-spin-reverse { --fa-animation-direction: reverse; } .fa-pulse, .fa-spin-pulse { animation-name: fa-spin; animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 1s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, steps(8)); } @media (prefers-reduced-motion: reduce) { .fa-beat, .fa-beat-fade, .fa-bounce, .fa-fade, .fa-flip, .fa-pulse, .fa-shake, .fa-spin, .fa-spin-pulse { animation-delay: -1ms; animation-duration: 1ms; animation-iteration-count: 1; transition-delay: 0s; transition-duration: 0s; } } @keyframes fa-spin { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } } .section { margin-bottom: 40px; } .section h2, h4 { font-size: 1.75rem; color: #775ae2; } .section p { font-size: 1rem; line-height: 1.6; color: #fff; } .btn { background-color: #775ae2 !important; border: none; border-radius: 6px !important; } .btn:hover{ background-color: #7b5fdfd6 !important; } input.form-control, select.form-select, textarea.form-control { background-color: transparent; border: 1px solid rgba(130, 130, 130, 0.277); color: #fff; outline: none; } input.form-control:focus, select.form-select:focus, textarea.form-control:focus { box-shadow: none; background-color: transparent; color: #fff; border: 1px solid rgba(130, 130, 130, 0.277); } input.form-control:hover, select.form-select:hover, textarea.form-control:hover { background-color: transparent; color: #fff; border: 1px solid rgba(130, 130, 130, 0.277); } input::placeholder, textarea::placeholder, select::placeholder { color: #fff !important; } .btn-close:focus { outline: none; box-shadow: none; } .btn-close { opacity: 100; margin-bottom: 1px !important; } .btn-close:hover { opacity: 100; } select.form-select option { background-color: #27416b; } @media (max-width: 768px) { body { padding: 20px 0; } .container { padding: 20px; } h1 { font-size: 2rem; } .carousel-control-next-icon { position: relative; right: -25px; } .carousel-control-prev-icon { position: relative; left: -25px; } .carousel-item p { margin: 0 12px; } } @media (max-width: 600px){ .alert{ left: 20px; } }