/* Light mode as default */
   :root {
       color-scheme: light;
       --bg-primary: #ffffff;
       --bg-secondary: #f0f9ff;
       --bg-tertiary: #e0f2fe;
       --text-primary: #1e293b;
       --text-secondary: #334155;
       --text-tertiary: #475569;
       --border-color: #cbd5e1;
       --shadow-color: rgba(0, 0, 0, 0.15);
       --header-bg: rgba(34, 197, 94, 0.85);
       --section-bg-alt: #f8fafc;
       --section-divider: #e2e8f0;
   }


   /* Apply text colors to all elements */
   .text-slate-800 {
       color: #1e293b !important;
   }

   .dark .text-slate-800 {
       color: #f1f5f9 !important;
   }

   .text-slate-700 {
       color: #334155 !important;
   }

   .dark .text-slate-700 {
       color: #e2e8f0 !important;
   }

   /* Dark mode color variables */
   .dark {
       color-scheme: dark;
       --bg-primary: #0f172a;
       --bg-secondary: #1e293b;
       --bg-tertiary: #334155;
       --text-primary: #f1f5f9;
       --text-secondary: #e2e8f0;
       --text-tertiary: #cbd5e1;
       --border-color: #475569;
       --shadow-color: rgba(0, 0, 0, 0.4);
       --header-bg: rgba(15, 23, 42, 0.95);
       --section-bg-alt: #1e293b;
       --section-divider: #475569;
   }

   /* Body styles that respond to dark mode toggle */
   body {
       background-color: var(--bg-primary);
       color: var(--text-primary);
       transition: background-color 0.3s ease, color 0.3s ease;
   }

   /* Enhanced section backgrounds with dividers */
   .section-bg-primary {
       background-color: var(--bg-primary);
       transition: background-color 0.3s ease;
       border-top: 1px solid var(--section-divider);
       border-bottom: 1px solid var(--section-divider);
   }

   .section-bg-secondary {
       background-color: var(--section-bg-alt);
       transition: background-color 0.3s ease;
       border-top: 1px solid var(--section-divider);
       border-bottom: 1px solid var(--section-divider);
   }

   /* Enhanced header styling with pastel colors */
   header {
       background: linear-gradient(135deg, rgba(134, 239, 172, 0.85) 0%, rgba(110, 231, 183, 0.85) 100%);
       backdrop-filter: blur(10px);
       border-bottom: 1px solid var(--border-color);
       transition: all 0.3s ease;
   }

   .dark header {
       background: linear-gradient(135deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.95) 100%);
   }

   /* Header text colors */
   header .text-white {
       color: #1f2937 !important;
       transition: all 0.3s ease;
   }

   .dark header .text-white {
       color: #f9fafb !important;
   }

   header .text-green-100 {
       color: #374151 !important;
       transition: all 0.3s ease;
   }

   .dark header .text-green-100 {
       color: #d1d5db !important;
   }

   header .hover\:text-green-200:hover {
       color: #111827 !important;
       transform: translateY(-1px);
   }

   .dark header .hover\:text-green-200:hover {
       color: #e5e7eb !important;
       transform: translateY(-1px);
   }

   /* Header logo hover effect */
   header a:first-child:hover {
       transform: scale(1.05);
       transition: transform 0.3s ease;
   }

   /* Navigation menu hover effects */
   header nav a {
       position: relative;
       padding: 8px 16px;
       border-radius: 8px;
       transition: all 0.3s ease;
   }

   header nav a:hover {
       background: rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(10px);
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   }

   .dark header nav a:hover {
       background: rgba(255, 255, 255, 0.05);
       box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
   }

   /* Mobile menu background with dark mode support */
   .mobile-menu-bg {
       background: linear-gradient(135deg, rgba(134, 239, 172, 0.95) 0%, rgba(110, 231, 183, 0.95) 100%);
       border-top: 1px solid rgba(255, 255, 255, 0.3);
       transition: all 0.3s ease;
   }

   .dark .mobile-menu-bg {
       background: linear-gradient(135deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.95) 100%);
       border-top: 1px solid rgba(255, 255, 255, 0.1);
   }

   /* Mobile menu links with dark mode support */
   .mobile-menu-link {
       color: #1f2937;
       background: rgba(255, 255, 255, 0);
       border-left: 4px solid transparent;
   }

   .dark .mobile-menu-link {
       color: #f9fafb;
   }

   .mobile-menu-link:hover {
       background: rgba(255, 255, 255, 0.2);
       border-left: 4px solid rgba(255, 255, 255, 0.5);
       padding-left: 20px;
       transform: translateX(4px);
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   }

   .dark .mobile-menu-link:hover {
       background: rgba(255, 255, 255, 0.1);
       border-left: 4px solid rgba(255, 255, 255, 0.3);
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
   }

   /* Enhanced card styling */
   .card-bg {
       background-color: var(--bg-primary);
       border: 1px solid var(--border-color);
       box-shadow: 0 4px 6px var(--shadow-color);
       transition: all 0.3s ease;
   }

   .card-bg:hover {
       box-shadow: 0 10px 25px var(--shadow-color);
   }

   /* Enhanced footer styling with pastel colors */
   .footer-bg {
       background: linear-gradient(135deg, rgba(134, 239, 172, 0.9) 0%, rgba(110, 231, 183, 0.9) 100%);
       transition: all 0.3s ease;
   }

   .dark .footer-bg {
       background: linear-gradient(135deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.95) 100%);
   }

   /* Footer text colors */
   .footer-bg .text-white {
       color: #1f2937 !important;
   }

   .dark .footer-bg .text-white {
       color: #f9fafb !important;
   }

   .footer-bg .text-green-500 {
       color: #059669 !important;
   }

   .dark .footer-bg .text-green-500 {
       color: #10b981 !important;
   }

   .footer-bg .text-gray-400 {
       color: #4b5563 !important;
   }

   .dark .footer-bg .text-gray-400 {
       color: #9ca3af !important;
   }

   /* Footer contact icons - dark in light mode */
   .footer-bg .text-green-600 {
       color: #059669 !important;
   }

   .dark .footer-bg .text-green-600 {
       color: #10b981 !important;
   }

   /* Footer contact text - dark in light mode */
   .footer-bg .text-gray-800 {
       color: #1f2937 !important;
   }

   .dark .footer-bg .text-gray-800 {
       color: #f9fafb !important;
   }

   .footer-bg .text-gray-200 {
       color: #1f2937 !important;
   }

   .dark .footer-bg .text-gray-200 {
       color: #e5e7eb !important;
   }

   .hero-bg {
       background-size: cover;
       background-position: center;
       background-attachment: fixed;
   }

   /* Fallback if hero image not available */
   .hero-bg-fallback {
       background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%234ade80" width="1200" height="600"/><circle fill="%2322c55e" cx="200" cy="150" r="80"/><circle fill="%2316a34a" cx="800" cy="200" r="60"/><rect fill="%23ffffff" x="300" y="200" width="600" height="200" rx="20"/><rect fill="%23f59e0b" x="320" y="220" width="100" height="80" rx="10"/><rect fill="%23ef4444" x="440" y="220" width="100" height="80" rx="10"/><rect fill="%233b82f6" x="560" y="220" width="100" height="80" rx="10"/><rect fill="%238b5cf6" x="680" y="220" width="100" height="80" rx="10"/></svg>');
       background-size: cover;
       background-position: center;
   }

   @media (max-width: 768px) {
       .hero-bg {
           background-attachment: scroll;
           min-height: 100vh;
       }
   }

   .gallery-container {
       overflow: hidden;
   }

   .gallery-track {
       display: flex;
       animation: scroll 20s linear infinite;
   }

   @keyframes scroll {
       0% {
           transform: translateX(0);
       }

       100% {
           transform: translateX(-50%);
       }
   }

   .lightbox {
       display: none;
       position: fixed;
       z-index: 1000;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.9);
   }

   .lightbox-content {
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 95vw;
       max-width: 900px;
       max-height: 90vh;
       background: white;
       border-radius: 12px;
       overflow: hidden;
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
       transition: background-color 0.3s ease;
   }

   /* Mobile menu landscape scrolling fix with increased size */
   @media (max-width: 768px) and (orientation: landscape) {
       #mobileMenu {
           max-height: calc(100vh - 60px);
           overflow-y: auto;
           overscroll-behavior: contain;
           -webkit-overflow-scrolling: touch;
       }

       #mobileMenu.open {
           position: fixed;
           top: 60px;
           left: 0;
           right: 0;
           bottom: 0;
           z-index: 9999;
           max-height: calc(100vh - 60px);
       }

       #mobileMenu.open .mobile-menu-bg {
           min-height: calc(100vh - 60px);
       }

       #mobileMenu.open .py-4 {
           padding-top: 1.5rem;
           padding-bottom: 1.5rem;
       }
   }

   /* Mobile landscape optimization - Card-style full screen image */
   @media (max-width: 768px) and (orientation: landscape) {
       .lightbox-content {
           width: 100vw;
           max-width: none;
           max-height: 100vh;
           height: 100vh;
           border-radius: 0;
           position: relative;
           overflow: hidden;
           background: #000;
           display: flex;
           flex-direction: column;
       }

       /* Card-style container for image */
       .lightbox-image-container {
           flex: 1;
           display: flex;
           align-items: center;
           justify-content: center;
           padding: 20px;
           background: #000;
       }

       .lightbox-image {
           max-width: 90%;
           max-height: 90%;
           object-fit: contain;
           border-radius: 12px;
           box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
           background: #fff;
           z-index: 1;
       }

       .dark .lightbox-image {
           background: #1f2937;
       }

       .lightbox-info {
           position: absolute;
           bottom: 0;
           left: 0;
           right: 0;
           max-height: 30vh;
           overflow-y: auto;
           background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
           backdrop-filter: blur(10px);
           padding: 1.5rem 1rem 0.75rem 1rem;
           z-index: 1001;
           color: white;
           transform: translateY(0);
           transition: transform 0.3s ease;
       }

       .lightbox-info h3 {
           color: white !important;
           margin-bottom: 0.375rem;
           font-size: 1.125rem;
       }

       .lightbox-info p {
           color: rgba(255, 255, 255, 0.9) !important;
           font-size: 0.8rem;
           line-height: 1.4;
       }

       .lightbox-info #lightbox-meta {
           border-top: 1px solid rgba(255, 255, 255, 0.2);
           margin-top: 0.75rem;
           padding-top: 0.75rem;
       }

       .lightbox-info #lightbox-date {
           color: rgba(255, 255, 255, 0.7) !important;
           font-size: 0.75rem;
       }

       .lightbox-info #lightbox-category {
           background: rgba(255, 255, 255, 0.2) !important;
           color: white !important;
           border: 1px solid rgba(255, 255, 255, 0.3);
           font-size: 0.75rem;
           padding: 0.25rem 0.5rem;
       }

       .dark .lightbox-info {
           background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
       }

       /* Navigation buttons - positioned over the image */
       .lightbox-nav-btn {
           z-index: 1002;
           background: rgba(0, 0, 0, 0.8);
           backdrop-filter: blur(5px);
           width: 50px;
           height: 50px;
           font-size: 18px;
           border: 2px solid rgba(255, 255, 255, 0.3);
       }

       .lightbox-nav-btn:hover {
           background: rgba(0, 0, 0, 0.9);
           border-color: rgba(255, 255, 255, 0.5);
       }

       .lightbox-prev {
           left: 15px;
       }

       .lightbox-next {
           right: 15px;
       }

       .lightbox-counter {
           z-index: 1002;
           background: rgba(0, 0, 0, 0.8);
           backdrop-filter: blur(5px);
           top: 15px;
           padding: 8px 16px;
           font-size: 14px;
           border: 1px solid rgba(255, 255, 255, 0.3);
           border-radius: 20px;
       }

       /* Close button positioning for landscape */
       .close {
           top: 15px;
           right: 20px;
           font-size: 35px;
           z-index: 1003;
           background: rgba(0, 0, 0, 0.8);
           width: 50px;
           height: 50px;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           border: 2px solid rgba(255, 255, 255, 0.3);
           backdrop-filter: blur(5px);
       }

       .close:hover {
           background: rgba(0, 0, 0, 0.9);
           border-color: rgba(255, 255, 255, 0.5);
       }

       /* Minimize button for card-style view */
       .lightbox-minimize {
           position: absolute;
           top: 15px;
           left: 20px;
           font-size: 30px;
           z-index: 1003;
           background: rgba(0, 0, 0, 0.8);
           width: 50px;
           height: 50px;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           border: 2px solid rgba(255, 255, 255, 0.3);
           backdrop-filter: blur(5px);
           color: white;
           cursor: pointer;
           transition: all 0.3s ease;
       }

       .lightbox-minimize:hover {
           background: rgba(0, 0, 0, 0.9);
           border-color: rgba(255, 255, 255, 0.5);
           transform: scale(1.1);
       }
   }

   .lightbox-nav-btn {
       position: fixed;
       top: 50%;
       transform: translateY(-50%);
       width: 50px;
       height: 50px;
       background: rgba(0, 0, 0, 0.7);
       border: none;
       border-radius: 50%;
       color: white;
       font-size: 18px;
       cursor: pointer;
       transition: all 0.3s ease;
       z-index: 1001;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .lightbox-nav-btn:hover {
       background: rgba(0, 0, 0, 0.9);
       transform: translateY(-50%) scale(1.1);
   }

   .lightbox-nav-btn:disabled {
       opacity: 0.3;
       cursor: not-allowed;
   }

   .lightbox-nav-btn:disabled:hover {
       transform: translateY(-50%) scale(1);
       background: rgba(0, 0, 0, 0.7);
   }

   .lightbox-prev {
       left: 20px;
   }

   .lightbox-next {
       right: 20px;
   }

   .lightbox-counter {
       position: fixed;
       top: 20px;
       left: 50%;
       transform: translateX(-50%);
       background: rgba(0, 0, 0, 0.7);
       color: white;
       padding: 8px 16px;
       border-radius: 20px;
       font-size: 14px;
       z-index: 1001;
   }

   .dark .lightbox-content {
       background: #1f2937;
   }

   .lightbox-image {
       width: 100%;
       max-height: 60vh;
       object-fit: contain;
       background: #f3f4f6;
       transition: background-color 0.3s ease;
   }

   .dark .lightbox-image {
       background: #374151;
   }

   .lightbox-info {
       padding: 1.5rem;
       max-height: 30vh;
       overflow-y: auto;
   }

   @media (max-width: 768px) {
       .lightbox-content {
           width: 98vw;
           max-height: 90vh;
           top: 45%;
           transform: translate(-50%, -45%);
       }

       .lightbox-image {
           max-height: 55vh;
       }

       .lightbox-info {
           padding: 0.75rem;
           max-height: 25vh;
           font-size: 0.875rem;
       }

       .lightbox-info h3 {
           font-size: 1.125rem;
           margin-bottom: 0.5rem;
       }

       .lightbox-info p {
           font-size: 0.8rem;
           line-height: 1.4;
       }

       .lightbox-info #lightbox-meta {
           margin-top: 0.75rem;
           padding-top: 0.75rem;
       }
   }

   .close {
       position: fixed;
       top: 20px;
       right: 20px;
       color: #f1f1f1;
       font-size: 40px;
       font-weight: bold;
       cursor: pointer;
       z-index: 1003;
       background: rgba(0, 0, 0, 0.8);
       width: 50px;
       height: 50px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       border: 2px solid rgba(255, 255, 255, 0.3);
       backdrop-filter: blur(5px);
       transition: all 0.3s ease;
   }

   .close:hover {
       background: rgba(0, 0, 0, 0.9);
       border-color: rgba(255, 255, 255, 0.5);
       transform: scale(1.1);
   }

   @media (max-width: 768px) {
       .close {
           top: 15px;
           right: 15px;
           font-size: 30px;
           width: 45px;
           height: 45px;
       }
   }

   .whatsapp-float {
       position: fixed;
       width: 60px;
       height: 60px;
       bottom: 40px;
       right: 40px;
       background-color: #25d366;
       color: #FFF;
       border-radius: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 30px;
       box-shadow: 2px 2px 3px #999;
       z-index: 100;
       animation: pulse 2s infinite;
       text-decoration: none;
   }

   @keyframes pulse {
       0% {
           transform: scale(1);
       }

       50% {
           transform: scale(1.1);
       }

       100% {
           transform: scale(1);
       }
   }

   .dark .hero-bg {
       background-size: cover;
       background-position: center;
       background-attachment: fixed;
   }

   @media (max-width: 768px) {
       .dark .hero-bg {
           background-attachment: scroll;
       }
   }

   /* Connection Status Styles */
   .connection-status {
       position: fixed;
       top: 80px;
       right: 20px;
       z-index: 1000;
       padding: 12px 16px;
       border-radius: 8px;
       font-size: 14px;
       font-weight: 500;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       transition: all 0.3s ease;
   }

   .dark .connection-status {
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   }

   .status-success {
       background-color: #10b981;
       color: white;
   }

   .status-error {
       background-color: #ef4444;
       color: white;
   }

   .status-loading {
       background-color: #f59e0b;
       color: white;
   }

   .status-offline {
       background-color: #6b7280;
       color: white;
   }

   /* Photo styles */
   .teacher-photo,
   .headmaster-photo {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: inherit;
   }

   .photo-placeholder {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
       height: 100%;
       border-radius: inherit;
   }

   /* Gallery styles */
   .gallery-photo-item {
       transition: all 0.3s ease;
   }

   .gallery-photo-item:hover {
       transform: translateY(-8px);
   }

   .line-clamp-2 {
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }

   /* Video gallery styles */
   .video-thumbnail-container {
       position: relative;
       overflow: hidden;
   }

   .video-play-overlay {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(0, 0, 0, 0.3);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       cursor: pointer;
   }

   .video-play-overlay:hover {
       background: rgba(0, 0, 0, 0.5);
   }

   .video-play-button {
       width: 60px;
       height: 60px;
       background: rgba(255, 255, 255, 0.9);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
   }

   .video-play-button:hover {
       background: rgba(255, 255, 255, 1);
       transform: scale(1.1);
   }

   .video-play-button i {
       color: #ef4444;
       font-size: 24px;
       margin-left: 3px;
       /* Adjust play icon position */
   }

   .video-type-badge {
       position: absolute;
       top: 8px;
       right: 8px;
       background: rgba(0, 0, 0, 0.8);
       color: white;
       padding: 4px 8px;
       border-radius: 12px;
       font-size: 10px;
       font-weight: 600;
       text-transform: uppercase;
       backdrop-filter: blur(5px);
   }

   .video-type-youtube {
       background: rgba(255, 0, 0, 0.9);
   }

   .video-type-direct {
       background: rgba(16, 185, 129, 0.9);
   }

   /* Video lightbox styles */
   .video-lightbox-container {
       position: relative;
       width: 100%;
       height: 60vh;
       background: #000;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .video-lightbox-player {
       width: 100%;
       height: 100%;
       border: none;
   }

   .video-lightbox-error {
       color: white;
       text-align: center;
       padding: 2rem;
   }

   @media (max-width: 768px) {
       .video-lightbox-container {
           height: 50vh;
       }

       .video-play-button {
           width: 50px;
           height: 50px;
       }

       .video-play-button i {
           font-size: 20px;
       }
   }

   /* Video slide styles */
   .video-slide-container {
       position: relative;
       width: 100%;
       height: 100%;
       background: #000;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .video-slide-player {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .video-slide-iframe {
       width: 100%;
       height: 100%;
       border: none;
   }

   /* Gallery slide styles */
   .gallery-slide-container {
       position: relative;
       width: 100%;
       height: 400px;
   }

   .gallery-slide-track {
       height: 100%;
   }

   .gallery-slide-item {
       flex: 0 0 100%;
       height: 100%;
       position: relative;
   }

   @media (min-width: 768px) {
       .gallery-slide-container {
           height: 500px;
       }
   }

   @media (min-width: 1024px) {
       .gallery-slide-container {
           height: 600px;
       }
   }

   .gallery-slide-content {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
       color: white;
       padding: 2rem;
   }

   .gallery-indicator {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background-color: rgba(255, 255, 255, 0.5);
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .gallery-indicator.active {
       background-color: #10b981;
       transform: scale(1.2);
   }





   /* Auto slide containers */
   .auto-slide-container {
       overflow: hidden;
       position: relative;
       width: 100%;
   }

   .auto-slide-track {
       display: flex;
       animation: autoSlide 25s linear infinite;
       transition: animation-play-state 1s ease;
       width: max-content;
   }

   .auto-slide-track:hover {
       animation-play-state: paused;
   }

   @keyframes autoSlide {
       0% {
           transform: translateX(0);
       }

       100% {
           transform: translateX(-50%);
       }

       /* karena datanya dobel */
   }

   /* Full width slide containers for tablet and mobile */
   @media (max-width: 1023px) {
       .auto-slide-container {
           margin: 0 -1rem;
           width: calc(100% + 2rem);
       }

       .auto-slide-track>* {
           margin-left: 1rem;
           margin-right: 1rem;
       }
   }

   @media (max-width: 767px) {
       .auto-slide-container {
           margin: 0 -1rem;
           width: calc(100% + 2rem);
       }

       .auto-slide-track>* {
           margin-left: 0.75rem;
           margin-right: 0.75rem;
           min-width: 280px;
       }
   }

   /* Mobile toggle buttons */
   .mobile-toggle-btn {
       background: linear-gradient(135deg, #10b981, #059669);
       color: white;
       border: none;
       padding: 12px 24px;
       border-radius: 25px;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s ease;
       box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
   }

   .mobile-toggle-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
   }

   .mobile-toggle-btn.expanded {
       background: linear-gradient(135deg, #ef4444, #dc2626);
       box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
   }

   .mobile-toggle-btn.expanded:hover {
       box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
   }

   .dark .mobile-toggle-btn {
       box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
   }

   .dark .mobile-toggle-btn:hover {
       box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
   }

   .dark .mobile-toggle-btn.expanded {
       box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
   }

   .dark .mobile-toggle-btn.expanded:hover {
       box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
   }

   /* Achievement lightbox styles */
   .achievement-item {
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .achievement-item:hover {
       transform: translateY(-8px);
   }

   .achievement-item .achievement-image {
       position: relative;
       overflow: hidden;
   }

   .achievement-item .achievement-image::after {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(0, 0, 0, 0);
       transition: all 0.3s ease;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .achievement-item:hover .achievement-image::after {
       background: rgba(0, 0, 0, 0.3);
   }

   .achievement-item:hover .achievement-image::after::before {
       content: '\f00e';
       font-family: 'Font Awesome 6 Free';
       font-weight: 900;
       color: white;
       font-size: 2rem;
   }

   /* Text formatting styles */
   .text-with-breaks {
       white-space: pre-line;
   }

   .text-with-html-breaks {
       line-height: 1.6;
   }