@font-face {
    font-family: bombing;
    src: url(Bombing.ttf);
}
@font-face {
    font-family: kids;
    src: url(kids.ttf);
}
/* common helper */
.rem-1 {font-size: 0.75rem;}
.rem1-5 {font-size: 0.95rem;}

* {margin: 0; padding: 0; box-sizing: border-box;}
#app-header { position: fixed; left: 0; top: 0; z-index: 9999; background:linear-gradient(rgba(46, 162, 229, 0.8), rgba(65, 173, 73, 0.8), rgba(235, 33, 40, 0.8));}
#app-body {position: fixed; left: 0; overflow: scroll; background: linear-gradient(120deg, #fff4d2, #ffd6d6, #d5f3f1); background-repeat: no-repeat; background-position: center; background-size: cover;}
#app-footer {height: 10vh; position: fixed; left: 0; bottom: 0; z-index: 9999;}

/* Setting Nav */
.nav-wrapper {padding: 0 0.25rem;}
.nav-button {background: lightblue; border-radius: 12px; box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.3), -4px -4px 8px rgba(255, 255, 255, 0.2); transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; height: 80px; width: 100%;}
.nav-button:hover {background: linear-gradient(145deg, #41af49, #37a7de);}
.nav-button:active {transform: translateY(4px); box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.1);}

/* setting the footer button */
#footer-button {box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.3), -4px -4px 8px rgba(255, 255, 255, 0.2); transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;}
#footer-button:hover {background: linear-gradient(145deg, #41af49, #37a7de);}
#footer-button:active {transform: translateY(4px); box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.1);}

.nav-category {text-shadow: 5px 5px 10px black;}

/* counter styling */
.counter {background-color: peachpuff; height: 80px; position: relative; border-radius: 1rem;}
.badge {position: absolute; top: -10px; right: 0;}

/* setting enrol page */
.container-wrapper {max-width: 500px; border-radius: 15px; backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); animation: float 3s ease-in-out infinite;} 
.input-group-text { background-color: rgba(255, 255, 255, 0.1); border: none; color: #333;}
.form-control, .btn {backdrop-filter: blur(5px); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #333;}
.form-control::placeholder {color: #333;}
.btn-outline-success {color: #fff; border-color: rgba(255, 255, 255, 0.5);}
.btn-outline-success:hover {background-color: rgba(255, 255, 255, 0.2);
}
@keyframes float {
    0%, 100% {transform: translateY(0);}
    50% {transform: translateY(-15px);}
}

/* STYLING MEDIA  AND MODAL*/
.thumbnail-wrapper {flex-shrink: 0;}
.modal {position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;}
.modal-content {position: relative; max-width: 95%; text-align: center;}
.modal-content .close {position: absolute; top: -50px; right: 10px; font-size: 2rem; cursor: pointer; color: white; z-index: 500;}

/* SETTING CHAT STYLE */
#chat-form {position: fixed; left: 0; bottom: 10vh;}
#chat-container {overflow: scroll; height: 55vh; position: relative;}
.message-wrapper {max-width: 95%; border-radius: 10px; margin: 0.5rem auto; position: relative;}
.user-styling {background-color: #d1e7dd; position: absolute; right: 0; text-align: right;}
.principal-styling {background-color: #f8d7da; position: absolute; left: 0; text-align: left;}
.message-content {border-radius: 5px; background: #ffffff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); word-wrap: break-word;}
.chat-edit-wrapper {display: none; position: absolute; top: -7px; right: 0; background-color: #ffffff; padding: 0.2rem; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);}
.message-wrapper:hover .chat-edit-wrapper {display: block;}
.sender {font-weight: bold; font-size: 0.9rem; color: #555;}
.timestamp {font-size: 0.8rem; color: #888; margin-top: 0.5rem;}

/* setting events */
/* Container for individual event items */
.event-item {border-radius: 12px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; background-color: #ffffff;}
.event-item:hover {transform: scale(1.03); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); text-decoration: none;}
/* Event image */
.event-img {height: 100%; width: 100%; object-fit: cover; border-top-left-radius: 12px; border-bottom-left-radius: 12px;}
/* Event text container */
.event-body {display: flex; flex-direction: column; justify-content: center; gap: 4px;}
.event-title {font-family: kids; color: #333333; font-size: 2rem; margin: 0;}
.event-subtext {color: #666666; font-size: 0.9rem;}
.event-date {color: #999999; font-size: 0.8rem; font-style: italic;}

/* styling the event details */
/* Event Detail Container */
.event-detail {font-family: 'Comic Sans MS', cursive, sans-serif; color: #333333; padding: 20px;  background: linear-gradient(135deg, #fdfbfb, #ebedee); border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);}
.event-image {width: 100%; border-radius: 12px; margin-bottom: 15px; object-fit: cover; max-height: 400px;}
.event-content {font-size: 16px; line-height: 1.6;}
.event-section h5 {margin-top: 20px; margin-bottom: 10px; font-size: 18px; color: #555555;}
.event-cost, .event-date {font-size: 18px; color: #000;}
.event-times div {font-size: 16px; color: #555555; padding: 10px; background: #f1f8e9; border-radius: 8px; margin: 5px 0;}
/* Responsive Styling */
@media (max-width: 768px) {
    .event-times div {
        font-size: 14px;
    }
}

/* styling btn-Share */
.eventShareBtns {
    background-color: rgba(0, 128, 0, 0.452);
    width: 150px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.d-flex {
    display: flex;
}

.justify-content-center {
    justify-content: center;
}

.me-2 {
    margin-right: 0.5rem;
}