:root{--primary:#f9216d;--light:#fee0eb;--dark:#4c0072;--tt-bg:#ffffff;--tt-text:#1f2937;--tt-text1:#000;--tt-card:#ffffff; --font-body:"Montserrat", sans-serif;--transition:0.3s ease;}
body {background:var(--tt-bg);color:var(--tt-text);transition:var(--transition);font-family:var(--font-body);}
p {font-family:var(--font-body);font-size:1rem;line-height:1.8em;color:var(--tt-text);text-align:justify;}
.back-to-top {position:fixed;display:none;right:45px;bottom:45px;z-index:99;}
.btn {font-weight:500;transition:.5s;}
.btn.btn-primary {color:#FFFFFF;}
.btn-square {width:38px;height:38px;}
.btn-sm-square {width:32px;height:32px;}
.btn-lg-square {width:48px;height:48px;}
.btn-square,.btn-sm-square,.btn-lg-square {padding:0;display:flex;align-items:center;justify-content:center;font-weight:normal;border-radius:50px;}
h1,h2,h3,h4,.h1,.h2,.h3,.h4,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6 {font-family:'Lobster Two', cursive;font-weight:700;}
h5,h6,.h5,.h6 {font-weight:600;}
.font-secondary {font-family:'Lobster Two', cursive;}
/*** Navbar ***/
.navbar .navbar-nav .nav-link {padding:30px 15px;color:var(--dark);font-weight:500;outline:none;}
.navbar .navbar-nav .nav-link:hover,.navbar .navbar-nav .nav-link.active {color:var(--primary);}
.navbar.sticky-top {top:-100px;transition:.5s;}
.navbar .dropdown-toggle::after {border:none;content:"\f107";font-family:"Font Awesome 5 Free";font-weight:900;vertical-align:middle;margin-left:5px;transition:.5s;}
.navbar .dropdown-toggle[aria-expanded=true]::after {transform:rotate(-180deg);}
@media (max-width:991.98px) {.navbar .navbar-nav .nav-link {margin-right:0;padding:10px 0;}
 .navbar .navbar-nav {margin-top:15px;border-top:1px solid #EEEEEE;}}
@media (min-width:992px) {.navbar .nav-item .dropdown-menu {display:block;top:calc(100% - 15px);margin-top:0;opacity:0;visibility:hidden;transition:.5s;}
.navbar .nav-item:hover .dropdown-menu {top:100%;visibility:visible;transition:.5s;opacity:1;}}
.navbar .mx-auto {margin-right:0 !important;}
.navicons .btn{color:#fee0eb;}
.navbar .navbar-nav .nav-link {position:relative; padding:30px 16px; font-weight:500;}
.navbar .navbar-nav .nav-text {position:relative; z-index:2;}
.navbar .navbar-nav .nav-balloon {position:absolute; left:50%; top:6px; transform:translateX(-50%) translateY(8px); font-size:1rem; color:var(--primary); opacity:0; pointer-events:none;}
.navbar .navbar-nav .nav-link.active {color:var(--primary); font-weight:600;}
.breadcrumb-item a{color:#fff;}
.navbar .navbar-nav .nav-link.active .nav-balloon {opacity:1; animation:balloonHeartFloat 2.6s ease-in-out infinite;}
@keyframes balloonHeartFloat {0% {transform:translateX(-50%) translateY(6px); }
 50% {transform:translateX(-50%) translateY(-6px); }
 100% {transform:translateX(-50%) translateY(6px);}}
@media (max-width:576px) {.navbar .navbar-nav .nav-balloon {display:none;}}
/*** Header ***/
.header-carousel::before,.header-carousel::after,.page-header::before,.page-header::after {position:absolute;content:"";width:100%;height:10px;top:0;left:0;background:url(../images/bg-header-top.png) center center repeat-x;z-index:1;}
.header-carousel::after,.page-header::after {height:19px;top:auto;bottom:0;background:url(../images/bg-header-bottom.png) center center repeat-x;}
@media (max-width:768px) {.rounded-circle{padding-bottom:0 !important;}#admin-sidebar .nav-link{font-size:11px !important;}.header-carousel .owl-carousel-item {position:relative;min-height:500px;} 
.header-carousel .owl-carousel-item img {position:absolute;width:100%;height:100%;object-fit:cover;}
.header-carousel .owl-carousel-item p {font-size:16px !important;font-weight:400 !important;}
.header-carousel .owl-carousel-item h1 {font-size:30px;font-weight:600;}}
.header-carousel .owl-nav {position:absolute;top:50%;right:8%;transform:translateY(-50%);display:flex;flex-direction:column;}
.header-carousel .owl-nav .owl-prev,.header-carousel .owl-nav .owl-next {margin:7px 0;width:45px;height:45px;display:flex;align-items:center;justify-content:center;color:#FFFFFF;background:transparent;border:1px solid #FFFFFF;border-radius:45px;font-size:22px;transition:.5s;}
.header-carousel .owl-nav .owl-prev:hover,.header-carousel .owl-nav .owl-next:hover {background:var(--primary);border-color:var(--primary);}
.page-header {background:linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(../images/carousel-1.jpg) center center no-repeat;background-size:cover;}
.breadcrumb-item + .breadcrumb-item::before {color:rgba(255, 255, 255, .5);}
/*** About ***/
.about-img img {transition:.5s;}
.about-img img:hover {background:var(--primary) !important;}
/*** programs ***/
.classes-item {transition:.5s;}
.classes-item:hover {margin-top:-10px;}
/*** Team ***/
.team-item .team-text {position:absolute;width:250px;height:250px;bottom:0;right:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#FFFFFF;border:17px solid var(--light);border-radius:250px;transition:.5s;}
.team-item:hover .team-text {border-color:var(--primary);}
@media (min-width:640px) and (max-width:1024px) {.rounded-circle {padding-bottom:0;}.team-item .team-text{width:235px; height:235px;}}
/*** Footer ***/
.footer .btn.btn-social {margin-right:5px;width:45px;height:45px;display:flex;align-items:center;justify-content:center;color:#FFFFFF;border:1px solid rgba(255,255,255,0.5);border-radius:45px;transition:.3s;}
.footer .btn.btn-social:hover {border-color:var(--primary);background:var(--primary);}
.footer .btn.btn-link {display:block;margin-bottom:5px;padding:0;text-align:left;font-size:16px;font-weight:normal;text-transform:capitalize;transition:.3s;color:rgba(255, 255, 255, 0.85) !important;}
.footer .btn.btn-link::before {position:relative;content:"\f105";font-family:"Font Awesome 5 Free";font-weight:900;margin-right:10px;}
.footer .btn.btn-link:hover {color:var(--light) !important;letter-spacing:1px;box-shadow:none;}
.footer .form-control {border-color:rgba(255,255,255,0.5);}
.form-control::placeholder {color:rgba(255, 255, 255, 0.85);}
.footer .copyright {padding:25px 0;font-size:15px;border-top:1px solid rgba(256, 256, 256, .1);color:rgba(255, 255, 255, 0.85) !important;}
.footer .copyright a {color:#FFFFFF;}
.footer .footer-menu a {margin-right:15px;padding-right:15px;border-right:1px solid rgba(255, 255, 255, .1);}
.footer .copyright a:hover,.footer .footer-menu a:hover {color:var(--light) !important;}
.footer .footer-menu a:last-child {margin-right:0;padding-right:0;border-right:none;}
@media (max-width:767.98px) {.header-carousel .btn {margin-bottom:12px;}}
.logo-letter {display:flex;align-items:center;position:relative;overflow:visible;}
.logo-letter .gap {width:8px;}
.logo-letter .word span {display:inline-block;opacity:0;transform:translateY(8px);animation:letterReveal 0.6s ease forwards;}
.logo-letter .tiny span:nth-child(1) {animation-delay:0.1s;}.logo-letter .tiny span:nth-child(2) {animation-delay:0.2s;}.logo-letter .tiny span:nth-child(3) {animation-delay:0.3s;}.logo-letter .tiny span:nth-child(4) {animation-delay:0.4s;}
.logo-letter .tots span:nth-child(1) {animation-delay:0.7s;}.logo-letter .tots span:nth-child(2) {animation-delay:0.8s;}.logo-letter .tots span:nth-child(3) {animation-delay:0.9s;}.logo-letter .tots span:nth-child(4) {animation-delay:1s;}
@keyframes letterReveal {to {opacity:1;transform:translateY(0);}}
.logo-hover:hover .word span {animation:none;opacity:0;transform:translateY(8px);}
.logo-hover:hover .word span {animation:letterReveal 0.6s ease forwards;}
.logo-letter .balloon {position:absolute;right:-14px;bottom:-6px;font-size:1.2rem;color:var(--primary);opacity:0;transform:translateY(0);pointer-events:none;}
.logo-hover:hover .balloon {animation:balloonFly 1.5s ease-out forwards;}
@keyframes balloonFly {0% {opacity:0;transform:translateY(0) scale(0.8);} 20% {opacity:1;} 100% {opacity:0;transform:translateY(-40px) scale(1.1);}}@media (prefers-reduced-motion:reduce) {.logo-letter .word span, .logo-letter .balloon {animation:none !important;opacity:1;transform:none;}}
.count-box {background:#fee0eb; border-radius:16px; padding:18px 20px; min-width:96px; box-shadow:0 8px 20px rgba(249, 33, 109, 0.15);}
.count-number {font-size:2rem; font-weight:700; color:var(--primary); line-height:1;}
.count-label {font-size:0.85rem; margin-top:6px; color:#666; letter-spacing:0.5px; text-transform:uppercase;}
.animated-bg {min-height:100vh; background:linear-gradient(120deg, #fff1f6, #ffe4ef, #f9216d22, #ffffff); background-size:300% 300%; animation:gradientMove 12s ease infinite;}
@keyframes gradientMove {0% {background-position:0% 50%;}
 50% {background-position:100% 50%; }
 100% {background-position:0% 50%; }}
[data-theme="dark"] .animated-bg {background:linear-gradient(120deg, #0f0f1a, #141428, #2a003f, #0f0f1a); background-size:300% 300%;}
.animated-bg {min-height:100vh; background:linear-gradient(120deg, #fff1f6, #ffe4ef, #ffd6e6, #ffffff); background-size:300% 300%; animation:gradientMove 15s ease infinite; position:relative; overflow:hidden;}
@keyframes gradientMove {0% {background-position:0% 50%; }
 50% {background-position:100% 50%; }
 100% {background-position:0% 50%; }}
.bubbles {position:absolute; inset:0; z-index:0; overflow:hidden;}
.bubbles span {position:absolute; bottom:-100px; width:40px; height:40px; background:rgba(249, 33, 109, 0.15); border-radius:50%; animation:bubbleRise 25s linear infinite;}
.bubbles span:nth-child(1) {left:10%; width:25px; height:25px; animation-duration:22s; }
.bubbles span:nth-child(2) {left:20%; width:40px; height:40px; animation-duration:28s; }
.bubbles span:nth-child(3) {left:30%; width:18px; height:18px; animation-duration:20s; }
.bubbles span:nth-child(4) {left:40%; width:55px; height:55px; animation-duration:32s; }
.bubbles span:nth-child(5) {left:50%; width:22px; height:22px; animation-duration:24s; }
.bubbles span:nth-child(6) {left:60%; width:35px; height:35px; animation-duration:29s; }
.bubbles span:nth-child(7) {left:70%; width:16px; height:16px; animation-duration:21s; }
.bubbles span:nth-child(8) {left:80%; width:50px; height:50px; animation-duration:34s; }
.bubbles span:nth-child(9) {left:90%; width:28px; height:28px; animation-duration:26s; }
.bubbles span:nth-child(10){left:15%; width:45px; height:45px; animation-duration:30s; }
@keyframes bubbleRise {0% {transform:translateY(0) scale(1); opacity:0; }
 10% {opacity:0.6; }
 100% {transform:translateY(-120vh) scale(1.2); opacity:0; }}
.bubbles {pointer-events:none;}
.attendance-chart {height:160px;}
.attendance-chart .bar {flex:1; height:var(--h); background:#2a2e38; border-radius:6px 6px 0 0; text-align:center; font-size:12px; color:#9ca3af; display:flex; align-items:flex-end; justify-content:center; padding-bottom:6px;}
.attendance-chart .bar.active {background:var(--primary); color:#fff;}
.report-list li {padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.06); font-size:14px;}
.attendance-table{color:#1f2937;}
[data-theme="dark"] .attendance-table{color:#e5e7eb;}.attendance-table tbody tr {border-bottom:1px solid rgba(255,255,255,0.05);}
.attendance-table td {padding:14px 8px;}
.status-pill{background:#f3f4f6;color:#374151;}
[data-theme="dark"] .status-pill{background:rgba(255,255,255,0.06);color:#e5e7eb;}
.status-pill {display:inline-flex; align-items:center; gap:6px; padding:4px 10px; font-size:13px; border-radius:999px;}
.status-pill .dot {width:6px; height:6px; border-radius:50%; background:#9ca3af;}
.status-pill.present .dot {background:var(--primary);}
.status-pill.absent {opacity:0.6;}
.icon-btn{color:#374151;}
[data-theme="dark"] .icon-btn{color:#e5e7eb;}
.icon-btn {background:transparent; border:1px solid rgba(255,255,255,0.15); width:32px; height:32px; border-radius:8px; margin-left:6px; display:inline-flex; align-items:center; justify-content:center; transition:all .2s ease;}
.icon-btn:hover {border-color:var(--primary); color:var(--primary);}
.report-list li:last-child {border-bottom:none;}
.report-list i {font-size:18px; color:#9ca3af; min-width:22px;}
.report-list .label{color:#6b7280;}
.report-list .value{color:#1f2937;font-weight:500;}
[data-theme="dark"] .report-list .label{color:#9ca3af;}
[data-theme="dark"] .report-list .value{color:#e5e7eb;}.announce-list li {padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.06);}
.announce-list li:last-child {border-bottom:none;}
.announce-list i {font-size:18px; color:#9ca3af; margin-top:2px;}
.announce-list p{color:#1f2937;}
[data-theme="dark"] .announce-list p{color:#e5e7eb;}.announce-list small {color:#9ca3af; font-size:12px;}
.sidebar-overlay {position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:998; display:none;}
@media (max-width:991.98px){#admin-sidebar{position:fixed;top:0;left:-260px;width:260px;height:100vh;background:#ffffff;z-index:999;transition:left .3s ease;}
#admin-sidebar.open{left:0;}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:998;display:none;}
.sidebar-overlay.show{display:block;}
.dashboard-bg .p-5{padding:1rem !important;}}.home2-hero {position: relative; background: url("../images/bg2.jpeg") center / cover no-repeat; padding: 120px 0; overflow: hidden;}
.home2-hero > .container,.home2-hero .bubbles {position: relative; z-index: 1;}
.hero-title {font-family: "Lobster Two", cursive; font-size: 3rem; margin-bottom: 20px;}
.hero-title span {color: var(--primary);}
.hero-text {font-size: 1.1rem; margin-bottom: 30px;}
.hero-image {background: #fff; padding: 16px; border-radius: 28px; box-shadow: 0 40px 80px rgba(0,0,0,.15); animation: float 6s ease-in-out infinite;}
@keyframes float {0%,100% {transform: translateY(0); } 50% {transform: translateY(-10px); }}
.features-strip {background: #fff; padding: 60px 0; box-shadow: 0 20px 50px rgba(0,0,0,.08);}
.feature-item i {font-size: 32px; color: var(--primary);}
.feature-item h6 {margin-top: 12px;}
.feature-item p {font-size: 14px; color: #6b7280;}
.home2-about {padding: 100px 0; background: #fff0f5;}
.checklist {list-style: none; padding: 0;}
.checklist li {margin-bottom: 12px; font-size: 15px;}
.checklist i {color: var(--primary); margin-right: 8px;}
.home2-programs {padding: 100px 0;}
.program-card {background: #fff; border-radius: 20px; padding: 30px; box-shadow: 0 20px 40px rgba(0,0,0,.08); transition: .3s ease;}
.program-card:hover {transform: translateY(-8px);}
/* ================= DASHBOARD ================= */
/* Light Mode */
.dashboard-bg{background:#f5f7fb;color:#1f2937;}
.card-surface{background:#ffffff;border-radius:14px;box-shadow:0 10px 25px rgba(0,0,0,0.05);}
.sidebar{background:#ffffff;border-right:1px solid #e5e7eb;}
.nav-link{color:#6b7280;}
.nav-link:hover{color:#111827;}
.nav-link.active{background:rgba(249,33,109,.12);color:#111827;}
/* Dark Mode */
[data-theme="dark"] .dashboard-bg{background:#0f1115;color:#e5e7eb;}
[data-theme="dark"] .card-surface{background:#171a21;box-shadow:none;}
[data-theme="dark"] .sidebar{background:#ffffff;border-right:1px solid #e5e7eb;} 
[data-theme="dark"] .nav-link{color:#9ca3af;}
[data-theme="dark"] .nav-link:hover{color:#ffffff;}
[data-theme="dark"] .nav-link.active{background:rgba(249,33,109,.15);color:#ffffff;}
.dashboard-bg,.card-surface,.sidebar,.nav-link{transition:all .3s ease;}
.theme-btn{background:var(--primary);color:#fff;border:none;}
.theme-btn:hover{background:#d81b60;color:#fff;}
/* Dark Mode Table Fix */
[data-theme="dark"] .attendance-table{background:#171a21;color:#e5e7eb;}
[data-theme="dark"] .attendance-table thead{color:#9ca3af;}
[data-theme="dark"] .attendance-table tbody tr{border-bottom:1px solid rgba(255,255,255,0.05);}
[data-theme="dark"] .attendance-table td,[data-theme="dark"] .attendance-table th{background:#171a21;color:#e5e7eb;}
/* Sidebar Toggle Button */
.sidebar-toggle{background:var(--primary);color:#fff;border:none;border-radius:8px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(249,33,109,0.35);}
.sidebar-toggle:hover{background:#e11d63;color:#fff;}
/* Dark mode */
[data-theme="dark"] .sidebar-toggle{background:#f9216d;color:#fff;}
/* Light mode links */
.sidebar .nav-link{color:#374151;}
.sidebar .nav-link:hover{color:#111827;}
/* Dark mode links */
[data-theme="dark"] .sidebar .nav-link{color:#9ca3af;}
[data-theme="dark"] .sidebar .nav-link:hover{color:#ffffff;}

#admin-sidebar{
background:#ffffff !important;
border-right:1px solid #e5e7eb !important;
}

[data-theme="dark"] #admin-sidebar{
background:#0f1115!important;
border-right:1px solid #e5e7eb !important;
}
@media (min-width:992px){
.sidebar-overlay{
display:none !important;
}
}@media (max-width:991px){
.sidebar-overlay.show{
display:block;
}
}

@media (min-width:992px){
.sidebar-overlay{
display:none !important;
}
}
@media (max-width:991.98px){

.navbar-collapse{
position:absolute;
top:100%;
left:0;
width:100%;
background:#ffffff;
z-index:999;
padding:20px;
box-shadow:0 10px 20px rgba(0,0,0,0.08);
}

}