/* :root {
            --clr-primary: #8b5cf6;
            --clr-primary-hover: #7c3aed;
            --clr-background: #0f172a;
            --clr-card-bg: rgba(30, 41, 59, 0.6);
            --clr-text: #f8fafc;
            --clr-text-secondary: #94a3b8;
            --border-radius: 1.5rem;
            --space-unit: 1rem;
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        } */

:root {
    /* Colors */
    --clr-primary: #671D17;
    --clr-secondary: #A84D47;
    --clr-primary-hover: #A84D47;
    --clr-background: #f5f5f5;
    --clr-card-bg: #FFFFFF;
    --clr-text: #1A0F0E;
    --clr-text-btn: #ffffff;
    --clr-text-secondary: #6B4E4C;
    --clr-accent: #2C6E49;
    --clr-accent-hover: #3A8C6E;
    --clr-danger: #ff0000;

    /* Spacing & Layout */
    --space-unit: 1rem;
    --w-100: 100%;
    --d-block: block;
    --tc: center;

    /* Borders & Shadows */
    --border-radius: 1.5rem;
    --shadow-lg: 0 10px 15px -3px rgba(103, 29, 23, 0.1);

    /* Transitions */
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     user-select: none;
 }

 html {
     font-size: 100%;
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     background: var(--clr-background);
     color: var(--clr-text);
     line-height: 1.5;
     min-height: 100vh;
     display: grid;
     place-items: center;
     padding: calc(var(--space-unit) * 2);
     position: relative;
     overflow-x: hidden;
 }

 hr{
    color: var(--clr-primary);
 }

 .container {
     width: min(100%, 72rem);
     margin-inline: auto;
     position: relative;
     z-index: 2;
 }

 .header {
     text-align: center;
     margin-bottom: calc(var(--space-unit) * 3);
     position: relative;
 }

 .title {
     font-size: clamp(2.5rem, 6vw, 3.5rem);
     font-weight: 800;
     line-height: 1.1;
     margin-bottom: calc(var(--space-unit) * 0.5);
     background: linear-gradient(45deg, var(--clr-primary), var(--clr-primary-hover));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     position: relative;
     letter-spacing: -0.05em;
     padding: 0.5rem 1rem;
 }

 .subtitle {
     font-size: clamp(1rem, 2.5vw, 1.25rem);
     color: var(--clr-text-secondary);
     font-style: italic;
     max-width: 40ch;
     margin-inline: auto;
     line-height: 1.4;
 }

 .grid {
     display: grid;
     gap: calc(var(--space-unit) * 1.5);
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
     margin-bottom: calc(var(--space-unit) * 3);
 }

 .card {
     background: var(--clr-card-bg);
     padding: calc(var(--space-unit) * 2);
     border-radius: var(--border-radius);
     backdrop-filter: blur(16px);
     border: 1px solid rgba(255, 255, 255, 0.08);
     transition: var(--transition);
     position: relative;
     overflow: hidden;
 }

 .card::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg,
             transparent,
             rgba(255, 255, 255, 0.05),
             transparent);
     transition: var(--transition);
 }

 .card:hover {
     transform: translateY(-0.5rem);
     box-shadow: var(--shadow-lg);
 }

 .card:hover::before {
     left: 100%;
 }

 .card__icon {
     font-size: 1.5rem;
     color: var(--clr-primary);
     margin-bottom: var(--space-unit);
     margin-right: 0.5rem;
     transition: var(--transition);
 }

 .card__content {
     position: relative;
 }

 .card__title {
     font-size: 1.5rem;
     margin-bottom: calc(var(--space-unit) * 0.75);
     font-weight: 600;
 }

 .card__text {
     font-size: 1rem;
     color: var(--clr-text-secondary);
     margin-bottom: calc(var(--space-unit) * 1.5);
 }
 .text-center{
    text-align: var(--tc);
 }

 .btn {
     display: inline-flex;
     align-items: center;
     gap: 0.75em;
     padding: 1em 2em;
     background: var(--clr-primary);
     color: var(--clr-text-btn);
     text-decoration: none;
     border-radius: 0.75em;
     font-weight: 500;
     transition: var(--transition);
     border: 2px solid transparent;
 }

 .btn:hover {
     background: var(--clr-primary-hover);
     transform: translateY(-0.125em);
     box-shadow: 0 10px 20px -5px rgba(103, 29, 23, 0.2);
     border-color: rgba(255, 255, 255, 0.1);
 }

 .btn__icon {
     font-size: 1.1em;
     transition: transform 0.3s ease;
 }

 .btn:hover .btn__icon {
     transform: translateX(0.25em);
 }

 .footer {
     border-top: 1px solid rgba(255, 255, 255, 0.08);
     margin-top: calc(var(--space-unit) * 3);
 }

 .footer__content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-block: calc(var(--space-unit) * 2);
     max-width: 72rem;
     margin-inline: auto;
 }

 .footer__text {
     font-size: 0.875rem;
     color: var(--clr-text-secondary);
 }

 .footer__social {
     display: flex;
     gap: calc(var(--space-unit) * 1.5);
 }

 .social-link {
     color: var(--clr-text-secondary);
     transition: var(--transition);
 }

 .social-link:hover {
     color: var(--clr-primary);
     transform: translateY(-0.125em);
 }

 .gradient-overlay {
     position: fixed;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle at 50% 50%,
             rgba(103, 29, 23, 0.1) 0%,
             transparent 60%);
     z-index: 1;
     pointer-events: none;
     animation: gradient-pulse 12s infinite;
 }

 /* Custom DataTable Styles */
 #logTable {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
     margin-top: calc(var(--space-unit) * 1.5);
     background: var(--clr-card-bg);
     backdrop-filter: blur(16px);
     border-radius: var(--border-radius);
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.08);
 }

 #logTable th,
 #logTable td {
     padding: calc(var(--space-unit) * 0.75) calc(var(--space-unit) * 1);
     text-align: left;
     vertical-align: middle;
     font-size: 0.875rem;
     color: var(--clr-text);
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }

 #logTable th {
     font-weight: 600;
     background: rgba(255, 255, 255, 0.05);
 }

 #logTable tbody tr:hover {
     background: rgba(255, 255, 255, 0.03);
 }

 #logTable tbody tr:last-child td {
     border-bottom: none;
 }

 .dt-scroll-head {
     display: none;
 }

 .info {
     font-size: 0.75rem;
     color: var(--clr-text-secondary);
     margin-top: calc(var(--space-unit) * 0.5);
     opacity: 0.8;
 }

 /* Contact Section */
 .contact-section {
     text-align: center;
     width: 100%;
     margin-top: calc(var(--space-unit) * 2);
     padding: calc(var(--space-unit) * 2) 0;
     background: var(--clr-card-bg);
     border-radius: var(--border-radius);
     box-shadow: var(--shadow-lg);
 }

 .btn-contact {
     background: var(--clr-primary);
     color: var(--clr-text-btn);
     padding: 1em 2em;
     border-radius: 0.75em;
     text-decoration: none;
     transition: var(--transition);
 }

 .btn-contact:hover {
     background: var(--clr-primary-hover);
     transform: translateY(-0.125em);
     box-shadow: 0 10px 20px -5px rgba(44, 110, 73, 0.2);
 }

 /* Form Styles */
 .form-group {
     margin-bottom: var(--space-unit);
 }

 .form-group label {
     display: block;
     font-size: 0.875rem;
     color: var(--clr-text-secondary);
     margin-bottom: calc(var(--space-unit) * 0.25);
 }

 .required {
     color: var(--clr-danger);
 }

 .form-control {
     width: 100%;
     padding: calc(var(--space-unit) * 0.75);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: calc(var(--border-radius) * 0.5);
     background: rgba(255, 255, 255, 0.05);
     color: var(--clr-text);
     font-size: 0.875rem;
     border-color: var(--clr-secondary);
     transition: var(--transition);
 }

 .form-control:focus {
     outline: none;
     border-color: var(--clr-primary);
     box-shadow: 0 0 0 2px rgba(103, 29, 23, 0.1);
 }

 .form-control::placeholder {
     color: var(--clr-text-secondary);
     opacity: 0.6;
 }

 /* Select Dropdown */
 .form-control.modern-select {
     appearance: none;
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
     background-repeat: no-repeat;
     background-position: right 0.75rem center;
     background-size: 1rem;
 }

 /* Textarea */
 .form-control.clcadm-textarea {
     resize: vertical;
     min-height: 120px;
 }

 /* Submit Button */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;
     padding: 1em 2em;
     background: var(--clr-primary);
     color: var(--clr-text-btn);
     border: none;
     border-radius: calc(var(--border-radius) * 0.5);
     font-size: 0.875rem;
     font-weight: 500;
     cursor: pointer;
     transition: var(--transition);
 }

 .btn:hover {
     background: var(--clr-primary-hover);
     transform: translateY(-0.125em);
     box-shadow: var(--shadow-lg);
 }

 /* Bottom Navigation Bar */
 .bottom-nav {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     background: var(--clr-card-bg);
     display: flex;
     justify-content: space-around;
     align-items: center;
     padding: calc(var(--space-unit) * 0.75) 0;
     box-shadow: var(--shadow-lg);
     z-index: 1000;
     border-top: 1px solid rgba(255, 255, 255, 0.08);
 }

 .nav-item {
     text-align: center;
     color: var(--clr-text-secondary);
     text-decoration: none;
     font-size: 0.875rem;
     transition: var(--transition);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.25rem;
     padding: 0.5rem 1rem;
     border-radius: calc(var(--border-radius) * 0.5);
 }

 .nav-item i {
     font-size: 1.25rem;
     color: var(--clr-text-secondary);
     transition: var(--transition);
 }

 .nav-item.active,
 .nav-item:hover {
     color: var(--clr-primary);
     background: rgba(103, 29, 23, 0.1);
 }

 .nav-item.active i,
 .nav-item:hover i {
     color: var(--clr-primary);
 }

.qr-code {
    width: var(--w-100);
    max-width: 250px;
    display: var(--d-block);
    margin: 1rem auto;
    border-radius: var(--border-radius);
}

 /* Responsive Adjustments */
 @media (max-width: 768px) {
     .bottom-nav {
         padding: calc(var(--space-unit) * 0.5) 0;
     }

     .nav-item {
         font-size: 0.75rem;
         padding: 0.5rem;
     }

     .nav-item i {
         font-size: 1rem;
     }
 }

 @keyframes shimmer {
     0% {
         transform: translateX(-100%) rotate(30deg);
     }

     100% {
         transform: translateX(100%) rotate(30deg);
     }
 }

 @keyframes gradient-pulse {

     0%,
     100% {
         transform: scale(1);
         opacity: 0.6;
     }

     50% {
         transform: scale(1.2);
         opacity: 0.3;
     }
 }

 @media (max-width: 768px) {
     .footer__content {
         flex-direction: column;
         gap: var(--space-unit);
         text-align: center;
     }

     .card {
         padding: var(--space-unit);
     }
 }