/* RunBhumi - Main CSS File - Mobile First Responsive */

/* Base Styles */
.navbar-brand {
    font-weight: bold;
    color: #01154f !important;
    font-size: 1.2rem; /* Mobile first - smaller font */
}

.card {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: none;
    margin-bottom: 1.5rem;
    border-radius: 15px;
    /* transition removed */
}

/* Hover effects removed */

.btn-primary {
    background: linear-gradient(135deg, #545864 0%, #373a46 50%, #7e86a0 100%);
    border: none;
    border-radius: 25px;
    padding: 10px 25px; /* Mobile first - smaller padding */
    font-weight: 600;
    font-size: 0.9rem; /* Mobile first - smaller font */
    /* transition removed */
}

/* Hover effects removed */

.btn-success {
    background: linear-gradient(135deg, #545864 0%, #373a46 50%, #7e86a0 100%);
    border: none;
    border-radius: 25px;
    padding: 10px 25px; /* Mobile first - smaller padding */
    font-weight: 600;
    font-size: 0.9rem; /* Mobile first - smaller font */
    /* transition removed */
}

/* Hover effects removed */

.btn-danger {
    background: linear-gradient(135deg, #545864 0%, #373a46 50%, #7e86a0 100%);
    border: none;
    border-radius: 25px;
    padding: 10px 25px; /* Mobile first - smaller padding */
    font-weight: 600;
    font-size: 0.9rem; /* Mobile first - smaller font */
    /* transition removed */
}

/* Hover effects removed */

.project-card {
    /* transition removed */
    border-radius: 15px;
    overflow: hidden;
}

/* Hover effects removed */

.badge {
    border-radius: 20px;
    padding: 6px 12px; /* Mobile first - smaller padding */
    font-weight: 500;
    font-size: 0.75rem; /* Mobile first - smaller font */
}

.table {
    border-radius: 10px;
    overflow: hidden;
}

.table thead th {
    background: linear-gradient(135deg, #01154f 0%, #001a6b 50%, #002080 100%);
    color: white;
    border: none;
    font-weight: 600;
    font-size: 0.9rem; /* Mobile first - smaller font */
}

.form-control {
    border-radius: 10px;
    border: 2px solid #e9ecef;
    padding: 10px 12px; /* Mobile first - smaller padding */
    font-size: 0.9rem; /* Mobile first - smaller font */
    transition: none !important;
}

/* Remove hover effects on form controls */
.form-control:hover {
    border-color: #e9ecef !important;
    background-color: inherit !important;
    color: inherit !important;
}

.form-control:focus {
    border-color: #01154f;
    box-shadow: 0 0 0 0.2rem rgba(1, 21, 79, 0.25);
}

.alert {
    border-radius: 15px;
    border: none;
    font-size: 0.9rem; /* Mobile first - smaller font */
}

.modal-content {
    border-radius: 15px;
    border: none;
}

.modal-header {
    background: linear-gradient(135deg, #01154f 0%, #001a6b 50%, #002080 100%);
    color: white;
    border-radius: 15px 15px 0 0;
}

.navbar {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95) !important;
}

body {
    padding-top: 0 !important;
    margin: 0 !important;
    background-color: #ffffff; /* Main background color */
}

/* Top Section with 2 Columns - Mobile First */
.top-section {
    background: #d04341;
    color: white;
    padding: 2px 0 !important; /* Mobile first - smaller padding */
    position: relative;
    overflow: hidden;
}

.top-section .container {
    padding: 0 15px;
}

.top-column {
    text-align:justify;
    padding: 10px !important; /* Mobile first - smaller padding */
    margin-bottom: 2px !important; /* Mobile first - smaller margin */
}

.top-column h3 {
    font-size: 0.9rem; /* Mobile first - smaller font */
    font-weight: 500;
    margin-bottom: 2px; /* Mobile first - smaller margin */
    color: white;
}



/* Hero Section */
.hero-section-ai {
    background: linear-gradient(135deg, #01154f 0%, #001a6b 50%, #002080 100%);
    color: white;
    padding: 40px 0; /* Mobile first - smaller padding */
    margin: 0 !important;
    position: relative;
    overflow: hidden;
}

.hero-section-ai .container {
    padding: 40px 15px !important; /* Mobile first - smaller padding */
}

.hero-section-ai h1 {
    font-size: 1.8rem; /* Mobile first - smaller font */
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-section-ai .lead {
    font-size: 0.9rem; /* Mobile first - smaller font */
    margin-bottom: 1.5rem;
}

.ai-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    padding: 6px 15px; /* Mobile first - smaller padding */
    font-size: 0.8rem; /* Mobile first - smaller font */
    font-weight: 600;
    color: white;
}

.gradient-text {
    background: linear-gradient(45deg, #fff, #f0f0f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-stats .stat-item {
    padding: 10px; /* Mobile first - smaller padding */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 10px; /* Mobile first - smaller margin */
}

.hero-stats .stat-item h3 {
    font-size: 1.2rem; /* Mobile first - smaller font */
    font-weight: 700;
    margin-bottom: 5px;
}

.hero-stats .stat-item p {
    font-size: 0.8rem; /* Mobile first - smaller font */
    margin: 0;
}

/* Feature Cards */
.feature-card {
    background: #f0e5ab; /* Section background color */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: none;
    /* transition removed */
    overflow: hidden;
    margin-bottom: 20px; /* Mobile first - smaller margin */
}

/* Hover effects removed */

.feature-icon {
    width: 60px; /* Mobile first - smaller size */
    height: 60px; /* Mobile first - smaller size */
    margin: 0 auto;
    background: linear-gradient(135deg, #01154f 0%, #001a6b 50%, #002080 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 15px; /* Mobile first - smaller margin */
}

.feature-card h5 {
    font-size: 1rem; /* Mobile first - smaller font */
    font-weight: 700;
    margin-bottom: 10px;
    color: #01154f;
}

.feature-card p {
    font-size: 0.85rem; /* Mobile first - smaller font */
    color: #666;
    line-height: 1.5;
}

/* Step Cards */
.step-card {
    background: #f0e5ab; /* Section background color */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: none;
    /* transition removed */
    position: relative;
    margin-bottom: 20px; /* Mobile first - smaller margin */
}

/* Hover effects removed */

.step-number {
    width: 50px; /* Mobile first - smaller size */
    height: 50px; /* Mobile first - smaller size */
    background: linear-gradient(135deg, #01154f 0%, #001a6b 50%, #002080 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem; /* Mobile first - smaller font */
    font-weight: bold;
    margin: 0 auto 15px; /* Mobile first - smaller margin */
}

.step-card h5 {
    font-size: 1rem; /* Mobile first - smaller font */
    font-weight: 700;
    margin-bottom: 10px;
    color: #01154f;
}

.step-card p {
    font-size: 0.85rem; /* Mobile first - smaller font */
    color: #666;
    line-height: 1.5;
}

/* Service Cards */
.service-card {
    background: #f0e5ab; /* Section background color */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: none;
    /* transition removed */
    overflow: hidden;
    margin-bottom: 20px; /* Mobile first - smaller margin */
}

/* Hover effects removed */

.service-image {
    position: relative;
    height: 150px; /* Mobile first - smaller height */
    overflow: hidden;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* transition removed */
}

/* Hover effects removed */

.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    /* transition removed */
}

/* Hover effects removed */

.service-icon {
    width: 50px; /* Mobile first - smaller size */
    height: 50px; /* Mobile first - smaller size */
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem; /* Mobile first - smaller font */
    color: #01154f;
}

.service-content {
    padding: 20px; /* Mobile first - smaller padding */
}

.service-badge {
    display: inline-block;
    background: linear-gradient(135deg, #01154f 0%, #001a6b 50%, #002080 100%);
    color: white;
    padding: 4px 12px; /* Mobile first - smaller padding */
    border-radius: 20px;
    font-size: 0.7rem; /* Mobile first - smaller font */
    font-weight: 600;
    margin-bottom: 10px; /* Mobile first - smaller margin */
}

.service-title {
    font-size: 1.1rem; /* Mobile first - smaller font */
    font-weight: 700;
    margin-bottom: 10px; /* Mobile first - smaller margin */
    color: #01154f;
}

.service-description {
    color: #666;
    line-height: 1.5;
    margin-bottom: 15px; /* Mobile first - smaller margin */
    font-size: 0.8rem; /* Mobile first - smaller font */
}

.service-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.service-price {
    font-size: 1rem; /* Mobile first - smaller font */
    font-weight: 700;
    color: #28a745;
}

.service-rating {
    display: flex;
    align-items: center;
    gap: 2px;
}

.service-rating i {
    color: #ffc107;
    font-size: 0.8rem; /* Mobile first - smaller font */
}

.rating-text {
    margin-left: 5px;
    font-weight: 600;
    color: #666;
    font-size: 0.8rem; /* Mobile first - smaller font */
}

/* Testimonial Cards */
.testimonial-card {
    background: #f0e5ab; /* Section background color */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: none;
    /* transition removed */
    margin-bottom: 20px; /* Mobile first - smaller margin */
}

/* Hover effects removed */

.testimonial-avatar img {
    width: 60px; /* Mobile first - smaller size */
    height: 60px; /* Mobile first - smaller size */
    object-fit: cover;
}

.testimonial-text {
    font-style: italic;
    color: #666;
    margin-bottom: 15px; /* Mobile first - smaller margin */
    line-height: 1.5;
    font-size: 0.85rem; /* Mobile first - smaller font */
}

.testimonial-name {
    font-weight: 700;
    color: #01154f;
    margin-bottom: 5px;
    font-size: 0.9rem; /* Mobile first - smaller font */
}

.testimonial-role {
    color: #666;
    font-size: 0.8rem; /* Mobile first - smaller font */
    margin-bottom: 10px; /* Mobile first - smaller margin */
}

.testimonial-rating i {
    color: #ffc107;
    margin: 0 2px;
    font-size: 0.8rem; /* Mobile first - smaller font */
}

/* Team Cards */
.team-card {
    background: #f0e5ab; /* Section background color */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: none;
    /* transition removed */
    margin-bottom: 20px; /* Mobile first - smaller margin */
    padding: 20px; /* Mobile first - smaller padding */
}

/* Hover effects removed */

.team-image {
    position: relative;
    display: inline-block;
}

.team-image img {
    border: 4px solid #01154f;
    /* transition removed */
}

/* Hover effects removed */

.team-name {
    font-weight: 700;
    color: #01154f;
    margin-bottom: 8px; /* Mobile first - smaller margin */
    font-size: 1rem; /* Mobile first - smaller font */
}

.team-position {
    color: #666;
    font-size: 0.85rem; /* Mobile first - smaller font */
    margin: 0;
    font-weight: 500;
}

/* Tech Cards */
.tech-card {
    background: #f0e5ab; /* Section background color */
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: none;
    /* transition removed */
    margin-bottom: 20px; /* Mobile first - smaller margin */
}

/* Hover effects removed */

.tech-title {
    font-weight: 700;
    color: #01154f;
    margin-bottom: 8px; /* Mobile first - smaller margin */
    font-size: 0.9rem; /* Mobile first - smaller font */
}

.tech-desc {
    color: #666;
    font-size: 0.8rem; /* Mobile first - smaller font */
    margin: 0;
    line-height: 1.4;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #01154f 0%, #001a6b 50%, #002080 100%);
}

/* Footer Styles */
.footer-ai {
    background: linear-gradient(135deg, #01154f 0%, #001a6b 50%, #002080 100%);
    color: white;
    padding: 40px 0 20px; /* Mobile first - smaller padding */
    position: relative;
    overflow: hidden;
}

.footer-ai .footer-content {
    position: relative;
    z-index: 2;
}

.footer-ai h5 {
    color: white !important;
    font-weight: 700;
    margin-bottom: 15px; /* Mobile first - smaller margin */
    font-size: 1rem; /* Mobile first - smaller font */
}

.footer-ai p,
.footer-ai a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    /* transition removed */
    font-size: 0.85rem; /* Mobile first - smaller font */
}

/* Hover effects removed */

.footer-ai .social-links a {
    display: inline-block;
    width: 35px; /* Mobile first - smaller size */
    height: 35px; /* Mobile first - smaller size */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    text-align: center;
    line-height: 35px; /* Mobile first - smaller size */
    margin-right: 8px; /* Mobile first - smaller margin */
    /* transition removed */
    font-size: 0.8rem; /* Mobile first - smaller font */
}

/* Hover effects removed */

/* Mobile First Responsive Design */

/* Tablet Styles */
@media (min-width: 768px) {
    .navbar-brand {
        font-size: 1.5rem;
    }
    
    .btn-primary,
    .btn-success,
    .btn-danger {
        padding: 12px 30px;
        font-size: 1rem;
    }
    
    .badge {
        padding: 8px 16px;
        font-size: 0.8rem;
    }
    
    .table thead th {
        font-size: 1rem;
    }
    
    .form-control {
        padding: 12px 15px;
        font-size: 1rem;
    }
    
    .alert {
        font-size: 1rem;
    }
    
    .top-section {
        padding: 20px 0;
    }
    
    .top-column {
        padding: 15px;
        margin-bottom: 0;
    }
    
    .top-column h3 {
        font-size: 1.2rem;
    }
    
    .top-column p {
        font-size: 0.9rem;
    }
    
    .hero-section-ai {
        padding: 60px 0;
    }
    
    .hero-section-ai .container {
        padding: 80px 15px !important;
    }
    
    .hero-section-ai h1 {
        font-size: 2.5rem;
    }
    
    .hero-section-ai .lead {
        font-size: 1.1rem;
    }
    
    .ai-badge {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
    
    .hero-stats .stat-item {
        padding: 15px;
        margin-bottom: 0;
    }
    
    .hero-stats .stat-item h3 {
        font-size: 1.5rem;
    }
    
    .hero-stats .stat-item p {
        font-size: 0.9rem;
    }
    
    .feature-card,
    .step-card,
    .service-card,
    .testimonial-card,
    .tech-card {
        margin-bottom: 30px;
    }
    
    .feature-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
    }
    
    .feature-card h5 {
        font-size: 1.2rem;
    }
    
    .feature-card p {
        font-size: 1rem;
    }
    
    .step-number {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    
    .step-card h5 {
        font-size: 1.2rem;
    }
    
    .step-card p {
        font-size: 1rem;
    }
    
    .service-image {
        height: 200px;
    }
    
    .service-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .service-content {
        padding: 25px;
    }
    
    .service-badge {
        padding: 5px 15px;
        font-size: 0.8rem;
    }
    
    .service-title {
        font-size: 1.3rem;
    }
    
    .service-description {
        font-size: 1rem;
    }
    
    .service-price {
        font-size: 1.2rem;
    }
    
    .service-rating i {
        font-size: 0.9rem;
    }
    
    .rating-text {
        font-size: 0.9rem;
    }
    
    .testimonial-avatar img {
        width: 80px;
        height: 80px;
    }
    
    .testimonial-text {
        font-size: 1rem;
    }
    
    .testimonial-name {
        font-size: 1rem;
    }
    
    .testimonial-role {
        font-size: 0.9rem;
    }
    
    .testimonial-rating i {
        font-size: 0.9rem;
    }
    
    .team-card {
        padding: 25px;
        margin-bottom: 30px;
    }
    
    .team-name {
        font-size: 1.2rem;
    }
    
    .team-position {
        font-size: 1rem;
    }
    
    .team-image img {
        width: 150px;
        height: 150px;
    }
    
    .tech-title {
        font-size: 1rem;
    }
    
    .tech-desc {
        font-size: 0.9rem;
    }
    
    .footer-ai {
        padding: 60px 0 30px;
    }
    
    .footer-ai h5 {
        font-size: 1.2rem;
    }
    
    .footer-ai p,
    .footer-ai a {
        font-size: 1rem;
    }
    
    .footer-ai .social-links a {
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin-right: 10px;
        font-size: 0.9rem;
    }
}

/* Desktop Styles */
@media (min-width: 1024px) {
    .hero-section-ai h1 {
        font-size: 3rem;
    }
    
    .hero-section-ai .lead {
        font-size: 1.2rem;
    }
    
    .feature-card h5 {
        font-size: 1.3rem;
    }
    
    .step-card h5 {
        font-size: 1.3rem;
    }
    
    .service-title {
        font-size: 1.4rem;
    }
    
    .testimonial-name {
        font-size: 1.1rem;
    }
    
    .team-name {
        font-size: 1.3rem;
    }
    
    .team-position {
        font-size: 1.1rem;
    }
    
    .team-image img {
        width: 180px;
        height: 180px;
    }
    
    .tech-title {
        font-size: 1.1rem;
    }
}

/* Enhanced Mobile Responsive Styles */
@media (max-width: 768px) {
    .container {
        padding: 0.5rem;
    }
    
    .container-fluid {
        padding: 0.25rem;
    }
    
    .card {
        margin: 0.5rem;
        border-radius: 10px;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .card-header {
        padding: 0.75rem 1rem;
    }
    
    .card-header h4 {
        font-size: 1.1rem;
    }
    
    .card-header p {
        font-size: 0.8rem;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
    }
    
    .btn-lg {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }
    
    /* Next/Previous Arrow Icons - Smaller */
    .btn i.fas.fa-arrow-right,
    .btn i.fas.fa-arrow-left {
        font-size: 0.8rem !important;
        margin-left: 0.3rem !important;
        margin-right: 0.3rem !important;
    }
    
    .btn-sm {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }
    
    .table-responsive {
        font-size: 0.8rem;
    }
    
    .table th,
    .table td {
        padding: 0.5rem 0.25rem;
        font-size: 0.8rem;
        color: white;
    }
    
    .navbar-nav {
        text-align: center;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    .navbar-brand {
        font-size: 1rem;
    }
    
    .form-control,
    .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
    }
    
    .form-control-lg,
    .form-select-lg {
        font-size: 16px;
        padding: 0.75rem;
    }
    
    .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
        font-weight: 600;
    }
    
    .form-text {
        font-size: 0.8rem;
    }
    
    .invalid-feedback {
        font-size: 0.8rem;
    }
    
    .valid-feedback {
        font-size: 0.8rem;
    }
    
    .alert {
        font-size: 0.9rem;
        padding: 0.75rem;
    }
    
    .modal-dialog {
        margin: 0.5rem;
    }
    
    .modal-content {
        border-radius: 10px;
    }
    
    .modal-header {
        padding: 1rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-footer {
        padding: 1rem;
    }
    
    .dropdown-menu {
        font-size: 0.9rem;
    }
    
    .badge {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
    
    .text-muted {
        font-size: 0.8rem;
    }
    
    .small {
        font-size: 0.75rem;
    }
    
    .lead {
        font-size: 1rem;
    }
    
    .display-4 {
        font-size: 2rem;
    }
    
    .display-5 {
        font-size: 1.75rem;
    }
    
    .display-6 {
        font-size: 1.5rem;
    }
    
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.9rem; }
    
    /* Employee specific mobile styles */
    .employee-dashboard .card {
        margin-bottom: 1rem;
    }
    
    .employee-dashboard .card-body {
        padding: 1rem;
    }
    
    .employee-dashboard .row {
        margin: 0;
    }
    
    .employee-dashboard .col-md-6,
    .employee-dashboard .col-lg-4 {
        padding: 0.25rem;
    }
    
    .employee-dashboard .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .employee-dashboard .btn-group .btn {
        margin-bottom: 0.25rem;
    }
    
    /* Service request form mobile styles */
    .service-request-form .row {
        margin: 0;
    }
    
    .service-request-form .col-md-6,
    .service-request-form .col-lg-4 {
        padding: 0.25rem;
        margin-bottom: 0.5rem;
    }
    
    .service-request-form .form-control,
    .service-request-form .form-select {
        margin-bottom: 0.5rem;
    }
    
    /* Client registration form mobile styles */
    .client-registration-form .row {
        margin: 0;
    }
    
    .client-registration-form .col-md-6,
    .client-registration-form .col-lg-4 {
        padding: 0.25rem;
        margin-bottom: 0.5rem;
    }
    
    .client-registration-form .form-control,
    .client-registration-form .form-select {
        margin-bottom: 0.5rem;
    }
    
    .client-registration-form .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .client-registration-form .btn-group .btn {
        margin-bottom: 0.5rem;
    }
    
    /* Profile form mobile styles */
    .profile-form .row {
        margin: 0;
    }
    
    .profile-form .col-md-6 {
        padding: 0.25rem;
        margin-bottom: 0.5rem;
    }
    
    .profile-form .form-control {
        margin-bottom: 0.5rem;
    }
    
    /* Navigation mobile styles */
    .navbar-toggler {
        border: none;
        padding: 0.25rem 0.5rem;
    }
    
    .navbar-toggler:focus {
        box-shadow: none;
    }
    
    .navbar-collapse {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #dee2e6;
    }
    
    /* Top section mobile styles */
    .top-section h3 {
        font-size: 0.9rem;
    }
    
    .top-section .col-6 {
        padding: 0.25rem;
    }
    
    /* Stats cards mobile styles */
    .stats-card {
        margin-bottom: 1rem;
    }
    
    .stats-card .card-body {
        padding: 1rem;
        text-align: center;
    }
    
    .stats-card h3 {
        font-size: 1.5rem;
    }
    
    .stats-card p {
        font-size: 0.8rem;
    }
    
    /* Table mobile styles */
    .table-mobile {
        font-size: 0.75rem;
    }
    
    .table-mobile th,
    .table-mobile td {
        padding: 0.25rem;
        vertical-align: middle;
    }
    
    .table-mobile .btn {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Pagination mobile styles */
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .pagination .page-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    /* Footer mobile styles */
    .footer {
        padding: 1rem 0;
    }
    
    .footer h5 {
        font-size: 1rem;
    }
    
    .footer p,
    .footer a {
        font-size: 0.8rem;
    }
    
    /* Progress steps mobile styles */
    .progress-steps {
        flex-direction: column;
        gap: 1rem;
    }
    
    .step {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .step-circle {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
    
    .step-label {
        font-size: 0.9rem;
    }
    
    /* Mobile Action Buttons */
    .action-column {
        width: 60px;
    }
    
    .btn-xs {
        padding: 0.2rem 0.4rem;
        font-size: 0.7rem;
        min-width: 24px;
        height: 24px;
    }
    
    .btn-xs i {
        font-size: 0.6rem !important;
    }
    
    /* Mobile Font Sizes - Keep Desktop Sizes */
    .form-control,
    .form-select,
    .form-label,
    .btn,
    .card-title,
    .card-text,
    .table,
    .badge,
    .alert,
    .nav-link,
    .navbar-brand {
        font-size: 1rem !important;
    }
    
    .h1, .h2, .h3, .h4, .h5, .h6 {
        font-size: inherit !important;
    }
    
    .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
        font-size: 2.5rem !important;
    }
}

/* Global Arrow Icon Styling - Smaller */
.btn i.fas.fa-arrow-right,
.btn i.fas.fa-arrow-left {
    font-size: 0.9rem !important;
    margin-left: 0.3rem !important;
    margin-right: 0.3rem !important;
}

/* Extra Small Button Styling */
.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: 0.25rem;
}

.btn-xs i {
    font-size: 0.7rem !important;
}

/* Action Column Styling */
.action-column {
    width: 80px;
    text-align: center;
}

.action-column .d-flex {
    justify-content: center;
}

.action-column .btn-xs {
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Remove ALL Hover Effects and Animations - COMPLETE REMOVAL */
* {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* Force remove all hover states and cursor effects */
*:hover,
*:focus,
*:active,
*:visited,
*:before:hover,
*:after:hover {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
    background-color: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
    opacity: 1 !important;
    scale: 1 !important;
    cursor: default !important;
}

/* Global table headings white - Override everything */
.table thead tr th,
.table tbody tr th,
table th,
thead th,
tbody th,
th,
.table th,
.table thead th,
.table tbody th {
    background-color: white !important;
    color: #212529 !important;
    font-weight: 600 !important;
    border: 1px solid #dee2e6 !important;
}

/* Global table heading icons black */
.table thead tr th i,
.table thead tr th .fas,
.table thead tr th .far,
.table thead tr th .fab,
.table tbody tr th i,
.table tbody tr th .fas,
.table tbody tr th .far,
.table tbody tr th .fab,
table th i,
thead th i,
tbody th i {
    color: #212529 !important;
}

/* Only table data text color fix */

/* Only admin/employee table data text color fix */
.admin-section .table tbody tr td,
.admin-section .table tbody tr th,
.employee-section .table tbody tr td,
.employee-section .table tbody tr th {
    color: #212529 !important;
}

/* Force fetched data in admin/employee tables to be black */
.admin-section .table tbody tr td *,
.admin-section .table tbody tr th *,
.employee-section .table tbody tr td *,
.employee-section .table tbody tr th * {
    color: #212529 !important;
}

.btn:hover,
.btn:focus,
.btn:active,
.nav-link:hover,
.nav-link:focus,
.nav-link:active,
.card:hover,
.table-hover tbody tr:hover,
.dropdown-item:hover,
.dropdown-item:focus,
.list-group-item:hover,
.badge:hover,
.alert:hover,
.modal:hover,
.tooltip:hover,
.popover:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
    opacity: 1 !important;
    scale: 1 !important;
}

/* Remove Bootstrap hover effects */
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover {
    background-color: transparent !important;
    border-color: inherit !important;
    color: inherit !important;
}

/* Remove table hover effects */
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
    background-color: inherit !important;
}



/* Remove navigation hover effects */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: inherit !important;
    background-color: transparent !important;
}

/* Remove dropdown hover effects */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: inherit !important;
    color: inherit !important;
}

/* Mobile Toggler Fix */
.navbar-toggler {
    border: none !important;
    padding: 4px 8px !important;
}

.navbar-toggler:focus {
    box-shadow: none !important;
    outline: none !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Ensure mobile menu works */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: white !important;
        border-top: 1px solid #dee2e6 !important;
        margin-top: 10px !important;
        padding: 15px !important;
        border-radius: 8px !important;
    }
    
    .navbar-nav .nav-item {
        margin-bottom: 5px !important;
    }
    
    .navbar-nav .nav-link {
        padding: 8px 12px !important;
        border-radius: 5px !important;
    }
}

/* Keep only essential form focus - Remove transitions */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    transition: none !important;
}

/* Remove all form hover effects */
.form-control:hover,
.form-select:hover,
.form-check-input:hover,
input:hover,
textarea:hover,
select:hover {
    background-color: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Admin/Employee Section Specific Fixes */
.admin-section *,
.employee-section * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* Force text color in admin/employee sections */
.admin-section .table th,
.admin-section .table td,
.employee-section .table th,
.employee-section .table td {
    color: #212529 !important;
}

.admin-section .table th *,
.admin-section .table td *,
.employee-section .table th *,
.employee-section .table td * {
    color: #212529 !important;
}

.admin-section .card-body,
.admin-section .card-header,
.employee-section .card-body,
.employee-section .card-header {
    color: #212529 !important;
}

.admin-section .card-body *,
.admin-section .card-header *,
.employee-section .card-body *,
.employee-section .card-header * {
    color: #212529 !important;
}

/* Admin/Employee table icons white */
.admin-section .table .btn i,
.admin-section .table i,
.admin-section .action-column i,
.employee-section .table .btn i,
.employee-section .table i,
.employee-section .action-column i {
    color: white !important;
}

/* Admin/Employee all TH tags white - Force Override */
.admin-section .table th,
.admin-section .table thead th,
.admin-section .table tbody th,
.admin-section .table thead tr th,
.admin-section .table tbody tr th,
.employee-section .table th,
.employee-section .table thead th,
.employee-section .table tbody th,
.employee-section .table thead tr th,
.employee-section .table tbody tr th,
.admin-section th,
.employee-section th {
    background-color: white !important;
    background: white !important;
    color: #212529 !important;
    font-weight: 600 !important;
    border: 1px solid #dee2e6 !important;
}

.admin-section .table th i,
.admin-section .table th .fas,
.admin-section .table th .far,
.admin-section .table th .fab,
.admin-section .table thead th i,
.admin-section .table thead th .fas,
.admin-section .table thead th .far,
.admin-section .table thead th .fab,
.admin-section .table tbody th i,
.admin-section .table tbody th .fas,
.admin-section .table tbody th .far,
.admin-section .table tbody th .fab,
.employee-section .table th i,
.employee-section .table th .fas,
.employee-section .table th .far,
.employee-section .table th .fab,
.employee-section .table thead th i,
.employee-section .table thead th .fas,
.employee-section .table thead th .far,
.employee-section .table thead th .fab,
.employee-section .table tbody th i,
.employee-section .table tbody th .fas,
.employee-section .table tbody th .far,
.employee-section .table tbody th .fab {
    color: #212529 !important;
}

.admin-section .btn:hover,
.admin-section .btn:focus,
.admin-section .btn:active,
.employee-section .btn:hover,
.employee-section .btn:focus,
.employee-section .btn:active {
    transform: none !important;
    box-shadow: none !important;
    background-color: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
}

/* Remove all form hover effects in admin and employee sections */
.admin-section .form-control:hover,
.admin-section .form-select:hover,
.admin-section input:hover,
.admin-section textarea:hover,
.admin-section select:hover,
.employee-section .form-control:hover,
.employee-section .form-select:hover,
.employee-section input:hover,
.employee-section textarea:hover,
.employee-section select:hover {
    background-color: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
}

.admin-section .table tbody tr:hover,
.employee-section .table tbody tr:hover {
    background-color: inherit !important;
}

.admin-section .card:hover,
.employee-section .card:hover {
    transform: none !important;
    box-shadow: inherit !important;
}

/* Table Styling Fixes */
.table {
    border: 1px solid #dee2e6 !important;
}

.table th,
.table td {
    border: 1px solid #dee2e6 !important;
    background-color: white !important;
}

/* Only admin/employee table content to be black */
.admin-section .table th,
.admin-section .table td,
.employee-section .table th,
.employee-section .table td {
    color: #212529 !important;
}

.admin-section .table th *,
.admin-section .table td *,
.employee-section .table th *,
.employee-section .table td * {
    color: #212529 !important;
}

/* Specific fixes for fetched data */
.table .badge {
    color: white !important;
}

.table .btn {
    color: white !important;
}

/* Action column icons white */
.action-column .btn i,
.action-column .fas,
.action-column .far,
.action-column .fab,
.action-column i {
    color: white !important;
}

/* All table action buttons icons white */
.table .btn i,
.table .fas,
.table .far,
.table .fab,
.table i {
    color: white !important;
}

.table .text-muted {
    color: #6c757d !important;
}

.table .text-success {
    color: #28a745 !important;
}

.table .text-danger {
    color: #dc3545 !important;
}

.table .text-warning {
    color: #ffc107 !important;
}

.table .text-info {
    color: #17a2b8 !important;
}

/* Force all TH tags white - Override Bootstrap */
.table th,
.table thead th,
.table tbody th,
.table thead tr th,
.table tbody tr th,
th,
thead th,
tbody th,
table th {
    background-color: white !important;
    background: white !important;
    color: #212529 !important;
    font-weight: 600 !important;
    border: 1px solid #dee2e6 !important;
    border-bottom: 2px solid #dee2e6 !important;
}

/* All TH icons black - Universal */
.table th i,
.table th .fas,
.table th .far,
.table th .fab,
.table thead th i,
.table thead th .fas,
.table thead th .far,
.table thead th .fab,
.table tbody th i,
.table tbody th .fas,
.table tbody th .far,
.table tbody th .fab,
.table thead tr th i,
.table thead tr th .fas,
.table thead tr th .far,
.table thead tr th .fab,
.table tbody tr th i,
.table tbody tr th .fas,
.table tbody tr th .far,
.table tbody tr th .fab {
    color: #212529 !important;
}

.table tbody tr:nth-child(even) {
    background-color: #f8f9fa !important;
}

.table tbody tr:nth-child(odd) {
    background-color: white !important;
}

/* Form Styling Fixes */
.form-control,
.form-select {
    border: 1px solid #ced4da !important;
    color: #212529 !important;
    background-color: white !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    background-color: white !important;
    color: #212529 !important;
}

/* Card Styling Fixes */
.card {
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}


.card-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
    color: #495057 !important;
}

/* Button Styling Fixes */
.btn {
    border: 1px solid transparent !important;
    color: #212529 !important;
}

.btn-primary {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: white !important;
}

.btn-success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: white !important;
}

.btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

.btn-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #212529 !important;
}

.btn-info {
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
    color: white !important;
}

.btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
}

/* Mobile Responsiveness Fixes */
@media (max-width: 768px) {
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Mobile table headings white */
    .table thead tr th,
    .table tbody tr th,
    table th,
    thead th,
    tbody th {
        background-color: white !important;
        color: #212529 !important;
        font-weight: 600 !important;
    }
    
    .table thead tr th i,
    .table thead tr th .fas,
    .table thead tr th .far,
    .table thead tr th .fab,
    .table tbody tr th i,
    .table tbody tr th .fas,
    .table tbody tr th .far,
    .table tbody tr th .fab,
    table th i,
    thead th i,
    tbody th i {
        color: #212529 !important;
    }
    
   
    
    .table th,
    .table td {
        padding: 8px 4px !important;
        font-size: 12px !important;
    }
    
    /* Only admin/employee table data on mobile */
    .admin-section .table th,
    .admin-section .table td,
    .employee-section .table th,
    .employee-section .table td {
        color: #212529 !important;
    }
    
    .admin-section .table th *,
    .admin-section .table td *,
    .employee-section .table th *,
    .employee-section .table td * {
        color: #212529 !important;
    }
    
    /* Mobile table icons white */
    .admin-section .table .btn i,
    .admin-section .table i,
    .admin-section .action-column i,
    .employee-section .table .btn i,
    .employee-section .table i,
    .employee-section .action-column i {
        color: white !important;
    }
    
    /* Mobile all TH tags white */
    .admin-section .table th,
    .admin-section .table thead th,
    .admin-section .table tbody th,
    .employee-section .table th,
    .employee-section .table thead th,
    .employee-section .table tbody th {
        background-color: white !important;
        color: #212529 !important;
    }
    
    .admin-section .table th i,
    .admin-section .table th .fas,
    .admin-section .table th .far,
    .admin-section .table th .fab,
    .admin-section .table thead th i,
    .admin-section .table thead th .fas,
    .admin-section .table thead th .far,
    .admin-section .table thead th .fab,
    .admin-section .table tbody th i,
    .admin-section .table tbody th .fas,
    .admin-section .table tbody th .far,
    .admin-section .table tbody th .fab,
    .employee-section .table th i,
    .employee-section .table th .fas,
    .employee-section .table th .far,
    .employee-section .table th .fab,
    .employee-section .table thead th i,
    .employee-section .table thead th .fas,
    .employee-section .table thead th .far,
    .employee-section .table thead th .fab,
    .employee-section .table tbody th i,
    .employee-section .table tbody th .fas,
    .employee-section .table tbody th .far,
    .employee-section .table tbody th .fab {
        color: #212529 !important;
    }
    
    .btn-xs {
        padding: 2px 6px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }
    
    .action-column {
        width: 60px !important;
        min-width: 60px !important;
    }
    
    .card-body {
        padding: 15px !important;
    }
    
    .form-control,
    .form-select {
        font-size: 14px !important;
        padding: 8px 12px !important;
    }
    
    .btn {
        font-size: 14px !important;
        padding: 8px 16px !important;
    }
    
    .navbar-brand {
        font-size: 1rem !important;
    }
    
    .navbar-nav .nav-link {
        font-size: 14px !important;
        padding: 8px 12px !important;
    }
    
    .progress-steps {
        flex-wrap: wrap !important;
    }
    
    .step {
        margin-bottom: 10px !important;
    }
    
    .step-circle {
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
    }
    
    .step-label {
        font-size: 10px !important;
    }
}

@media (max-width: 576px) {
    .table th,
    .table td {
        padding: 6px 2px !important;
        font-size: 11px !important;
    }
    
    /* Small mobile table headings white */
    .table thead tr th,
    .table tbody tr th,
    table th,
    thead th,
    tbody th {
        background-color: white !important;
        color: #212529 !important;
        font-weight: 600 !important;
    }
    
    .table thead tr th i,
    .table thead tr th .fas,
    .table thead tr th .far,
    .table thead tr th .fab,
    .table tbody tr th i,
    .table tbody tr th .fas,
    .table tbody tr th .far,
    .table tbody tr th .fab,
    table th i,
    thead th i,
    tbody th i {
        color: #212529 !important;
    }
    
    /* Only admin/employee table data on small mobile */
    .admin-section .table th,
    .admin-section .table td,
    .employee-section .table th,
    .employee-section .table td {
        color: #212529 !important;
    }
    
    .admin-section .table th *,
    .admin-section .table td *,
    .employee-section .table th *,
    .employee-section .table td * {
        color: #212529 !important;
    }
    
    /* Small mobile table icons white */
    .admin-section .table .btn i,
    .admin-section .table i,
    .admin-section .action-column i,
    .employee-section .table .btn i,
    .employee-section .table i,
    .employee-section .action-column i {
        color: white !important;
    }
    
    /* Small mobile all TH tags white */
    .admin-section .table th,
    .admin-section .table thead th,
    .admin-section .table tbody th,
    .employee-section .table th,
    .employee-section .table thead th,
    .employee-section .table tbody th {
        background-color: white !important;
        color: #212529 !important;
    }
    
    .admin-section .table th i,
    .admin-section .table th .fas,
    .admin-section .table th .far,
    .admin-section .table th .fab,
    .admin-section .table thead th i,
    .admin-section .table thead th .fas,
    .admin-section .table thead th .far,
    .admin-section .table thead th .fab,
    .admin-section .table tbody th i,
    .admin-section .table tbody th .fas,
    .admin-section .table tbody th .far,
    .admin-section .table tbody th .fab,
    .employee-section .table th i,
    .employee-section .table th .fas,
    .employee-section .table th .far,
    .employee-section .table th .fab,
    .employee-section .table thead th i,
    .employee-section .table thead th .fas,
    .employee-section .table thead th .far,
    .employee-section .table thead th .fab,
    .employee-section .table tbody th i,
    .employee-section .table tbody th .fas,
    .employee-section .table tbody th .far,
    .employee-section .table tbody th .fab {
        color: #212529 !important;
    }
    
    .btn-xs {
        padding: 1px 4px !important;
        font-size: 9px !important;
    }
    
    .action-column {
        width: 50px !important;
        min-width: 50px !important;
    }
    
    .card-header h4 {
        font-size: 1.1rem !important;
    }
    
    .card-header p {
        font-size: 0.8rem !important;
    }
}

/* ULTIMATE OVERRIDE - Force all TH white */
th,
thead th,
tbody th,
table th,
.table th,
.table thead th,
.table tbody th,
.table thead tr th,
.table tbody tr th,
.admin-section th,
.admin-section .table th,
.admin-section .table thead th,
.admin-section .table tbody th,
.employee-section th,
.employee-section .table th,
.employee-section .table thead th,
.employee-section .table tbody th {
    background-color: white !important;
    background: white !important;
    color: #212529 !important;
    font-weight: 600 !important;
    border: 1px solid #dee2e6 !important;
}

/* Client Registration Form - Remove all background color changes on hover */
.employee-section .form-control:hover,
.employee-section .form-select:hover,
.employee-section input:hover,
.employee-section textarea:hover,
.employee-section select:hover,
.employee-section .btn:hover,
.employee-section .card:hover,
.employee-section .card-header:hover,
.employee-section .card-body:hover,
.employee-section label:hover,
.employee-section .form-label:hover {
    background-color: inherit !important;
    background: inherit !important;
}

/* Remove Bootstrap bg classes hover effects */
.employee-section .bg-primary:hover,
.employee-section .bg-light:hover,
.employee-section .bg-success:hover,
.employee-section .bg-danger:hover,
.employee-section .bg-warning:hover,
.employee-section .bg-info:hover {
    background-color: inherit !important;
    background: inherit !important;
}

/* Remove border-primary hover effects */
.employee-section .border-primary:hover {
    border-color: inherit !important;
}

/* Ensure no background changes on form elements */
.employee-section input[type="text"]:hover,
.employee-section input[type="email"]:hover,
.employee-section input[type="tel"]:hover,
.employee-section input[type="number"]:hover,
.employee-section textarea:hover,
.employee-section select:hover {
    background-color: #fff !important;
    background: #fff !important;
}

/* Remove background colors from client registration form */
.employee-section .card-header.bg-primary,
.employee-section .card.bg-light,
.employee-section .card.border-primary {
    background-color: transparent !important;
    background: transparent !important;
}

.employee-section .card-header {
    background-color: transparent !important;
    background: transparent !important;
    border-bottom: 1px solid #dee2e6 !important;
}