/* welcome.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--bg-light); /* MODIFIED: Changed from linear-gradient */
    padding-top: 70px; /* NEW: Add padding for fixed header */
    box-sizing: border-box; /* Ensure padding is included in element's total width and height */
}

body.dark-theme {
    background-color: var(--bg-light); /* MODIFIED: Changed from linear-gradient */
}

.welcome-container {
    background-color: var(--bg-white); /* MODIFIED: Ensured it uses theme variable */
    padding: var(--spacing-xl);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    width: 100%;
    max-width: 600px;
    text-align: center;
    border: 1px solid var(--border-color);
    position: relative;
    /* Added for theme toggle positioning */
    margin-bottom: var(--spacing-xl); /* Add margin bottom to avoid content touching bottom on small screens */
}

/* Moved from index.html inline style */
.welcome-container .theme-toggle-btn {
    position: absolute;
    top: 20px;
    /* Adjust as needed for padding within the container */
    right: 20px;
    /* Adjust as needed for padding within the container */
    font-size: 2.2rem;
    /* Decreased size */
    padding: 5px;
    /* Add some padding to make it a bigger clickable area */
}

/* NEW: Language Toggle Button positioning */
.welcome-container .lang-toggle-btn {
    position: absolute;
    top: 20px;
    left: 20px; /* Position on the left side */
    /* Removed: font-size, padding, font-weight - now handled by Ticketcommon.css */
}

.welcome-container .lang-toggle-btn:hover {
    color: var(--primary-color);
}


.welcome-container .theme-toggle-btn i {
    font-size: 2.2rem;
    /* Ensure the icon itself is large */
}


.welcome-header {
    margin-bottom: var(--spacing-lg);
}

.welcome-header .logo-brand {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

body.dark-theme .welcome-header .logo-brand {
    color: var(--welcome-dark-gold); /* Using the new variable for dark mode */
}

.welcome-header h2 {
    font-size: 2.2rem;
    color: var(--text-color);
    margin-bottom: var(--spacing-md);
}

.welcome-header p {
    color: var(--text-light);
    font-size: 1rem;
}

.welcome-buttons {
    display: flex;
    flex-direction: row; /* MODIFIED: Change to row */
    flex-wrap: wrap; /* MODIFIED: Allow wrapping */
    justify-content: center; /* MODIFIED: Center items horizontally */
    gap: var(--spacing-lg); /* Increased gap between buttons */
    margin-top: var(--spacing-lg);
}

/* Thumbnail Button Styles */
.welcome-buttons .btn-large {
    padding: var(--spacing-md);
    /* Adjusted padding for square look */
    font-size: 1.1rem;
    width: 100%;
    min-height: 120px;
    /* Ensure a minimum height for thumbnail look */
    display: flex;
    flex-direction: column;
    /* Stack icon and text */
    align-items: center;
    /* Center horizontally */
    justify-content: center;
    /* Center vertically */
    text-align: center;
    gap: var(--spacing-sm);
    /* Space between icon and text */
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-light);
    /* Initial subtle shadow */
    transition: all 0.3s ease; /* Ensure smooth transitions for color changes */
}

.welcome-buttons .btn-large i {
    font-size: 3rem;
    /* Larger icons for thumbnail */
    margin-bottom: 0; /* Remove original margin */
}


/* Light Theme - Primary Button (Dovalla Task Management System - when not disabled) */
.welcome-buttons .btn-primary:not(.fade-disabled) {
    background-color: #7cbcff59; /* A slightly richer blue than default primary */
    color: var(--text-white);
    border-color: #0069d9;
}

.welcome-buttons .btn-primary:not(.fade-disabled):hover {
    background-color: var(--primary-dark); /* Deeper blue on hover */
    border-color: var(--primary-dark);
}

.welcome-buttons .btn-primary:not(.fade-disabled) i {
    color: var(--text-white);
}

/* Light Theme - Secondary Button (Dovalla Ticket System) */
.welcome-buttons .btn-secondary {
    background-color: var(--primary-light); /* Changed to light blue from Ticketcommon.css */
    color: var(--text-color); /* Dark text for contrast */
    border-color: var(--primary-light);
}

.welcome-buttons .btn-secondary:hover {
    background-color: var(--primary-color); /* Blue on hover */
    color: var(--text-white);
    border-color: var(--primary-color);
}

.welcome-buttons .btn-secondary i {
    color: var(--primary-dark); /* Darker blue icon for better contrast on light blue background */
}

.welcome-buttons .btn-secondary:hover i {
    color: var(--text-white); /* White icon on hover */
}


/* Dark Theme Specific Styles for Welcome Buttons */

/* Dark Theme - Primary Button (Task Management System) */
body.dark-theme .welcome-buttons .btn-primary {
    background-color: var(--welcome-dark-gold); /* Gold */
    color: var(--text-black); /* Black text for contrast */
    border-color: var(--welcome-dark-gold);
}

body.dark-theme .welcome-buttons .btn-primary:hover {
    background-color: var(--primary-dark); /* Darker gold on hover */
    border-color: var(--primary-dark);
    color: var(--text-black);
}

body.dark-theme .welcome-buttons .btn-primary i {
    color: var(--text-black); /* Ensure icon is black */
}

/* Dark Theme - Secondary Button (Dovalla Ticket System) */
body.dark-theme .welcome-buttons .btn-secondary {
    background-color: var(--bg-dark-surface); /* Dark background matching cards */
    color: var(--text-color); /* Light text */
    border-color: var(--border-color); /* Subtle dark border */
}

body.dark-theme .welcome-buttons .btn-secondary i {
    color: var(--text-color); /* Light icon */
}

body.dark-theme .welcome-buttons .btn-secondary:hover {
    background-color: var(--primary-color); /* Gold on hover */
    color: var(--text-black); /* Black text on hover */
    border-color: var(--primary-color);
}

body.dark-theme .welcome-buttons .btn-secondary:hover i {
    color: var(--text-black); /* Black icon on hover */
}

/* Disabled Button Styles (for Task Management System) */
.fade-disabled {
    pointer-events: none;
    cursor: not-allowed;
    position: relative; /* For the badge */
}

/* Light theme disabled style */
.fade-disabled {
    background-color: rgba(173, 216, 230, 0.5); /* Light blue, semi-transparent */
    color: rgba(0, 0, 0, 0.4); /* Muted black text */
    border-color: rgba(173, 216, 230, 0.8); /* Slightly less transparent border */
    box-shadow: none; /* No shadow when disabled */
    opacity: 1; /* Not too faded, let color handle "disabled" look */
    filter: none; /* No grayscale */
}

.fade-disabled i {
    color: rgba(0, 0, 0, 0.3); /* Muted black icon */
}


/* Dark theme disabled style */
body.dark-theme .fade-disabled {
    background-color: var(--bg-dark); /* Changed to a very dark grey for better contrast */
    color: var(--primary-color); /* Changed to gold for clear visibility */
    border-color: var(--primary-color); /* Changed to gold border for distinction */
    box-shadow: none;
    opacity: 1;
    filter: none;
}

body.dark-theme .fade-disabled i {
    color: var(--primary-color); /* Ensure icon is gold for contrast */
}

/* Ensure the development badge is styled correctly on disabled button */
.fade-disabled .development-badge {
    opacity: 1; /* Keep badge fully opaque */
    filter: none; /* No grayscale on badge itself */
    background-color: var(--secondary-color); /* Consistent grey for disabled badge */
    color: var(--text-white);
    border-color: var(--secondary-color);
}

body.dark-theme .fade-disabled .development-badge {
    background-color: var(--secondary-dark); /* Darker grey for disabled badge in dark mode */
    color: var(--text-white);
    border-color: var(--secondary-dark);
}

body.dark-theme .welcome-buttons .fade-disabled {
    background-color: var(--bg-dark); /* Changed to a very dark grey for better contrast */
    color: #666; /* Changed to muted black for clear visibility */
    border-color: #666; /* Changed to gold border for distinction */
    box-shadow: none; /* No shadow when disabled */
    opacity: 1; /* Not faded */
    filter: none;
}

/* Also update the icon selector to match the new specificity for the disabled button */
body.dark-theme .welcome-buttons .fade-disabled i {
    color: #666; /* Ensure icon is muted black for contrast */
}

/* Adjust button padding to ensure badge fits nicely without obscuring main content */
.welcome-buttons .btn-large {
    position: relative; /* Essential for positioning the absolute badge */
    padding-top: calc(var(--spacing-md) + 1em); /* Increase top padding to make space for the badge */
    padding-bottom: var(--spacing-md); /* Keep regular bottom padding */
}

/* Adjust icon and text margin for better spacing with the new badge */
.welcome-buttons .btn-large i {
    margin-bottom: 0; /* Remove original margin */
}

/* NEW: Custom styles for Arabic button text and icons on the welcome page */
html[dir="rtl"] .welcome-buttons .btn-large span {
    font-size: 1.2rem; /* Adjust as needed for Arabic text size */
}

html[dir="rtl"] .welcome-buttons .btn-large i {
    font-size: 3.2rem; /* Adjust as needed for Arabic icon size */
}

/* NEW: Adjust padding-top for buttons in Arabic (RTL) to prevent icon/badge clash */
html[dir="rtl"] .welcome-buttons .btn-large {
    padding-top: 55px; /* Increased padding-top for Arabic to accommodate larger icon and badge */
}

/* welcome.css - add these styles for the video background */

.welcome-background-video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    /* Ensures it's behind all other content */
    background-size: cover;
    object-fit: cover;
    filter: brightness(0.6);
    /* Slightly dim the video to make content more readable */
}

/* NEW: Overlay for light mode video background on welcome page */
body.welcome-video-background:not(.dark-theme)::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    /* Semi-transparent white overlay */
    z-index: -99;
    /* Above the video (-100) but below all content */
    pointer-events: none;
    /* Allows clicks to pass through */
}

body.welcome-video-background {
    background-color: transparent;
    /* No default background color */
    position: relative;
    /* For z-index context of children */
    z-index: 1;
    /* Ensure body content is above the video */
    overflow: hidden;
    /* Hide overflow from the video */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
}

.welcome-container {
    position: relative;
    /* Make sure it stacks above the video */
    z-index: 10;
    /* Higher than the body content's z-index */
    /* ... existing welcome-container styles ... */
    background-color: rgba(var(--bg-white-rgb, 255, 255, 255), 0.9);
    /* Example semi-transparent white */
}

body.dark-theme .welcome-container {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    /* Example semi-transparent dark */
}

/* Rest of welcome.css content remains as is. */


/* Media query for larger screens - Removed row layout for buttons */
@media (min-width: 768px) {
    .welcome-buttons .btn-large {
        max-width: calc(50% - var(--spacing-lg) / 2); /* Set width for two columns */
    }

    /* NEW: Force the primary button to take full width of the container on larger screens */
    .welcome-buttons .btn-primary.btn-large {
        max-width: 100%; /* Take full width */
        flex-basis: 100%; /* Ensure it spans the entire row */
    }
}


@media (max-width: 480px) {
    .welcome-container {
        padding: var(--spacing-lg);
    }

    .welcome-header h2 {
        font-size: 1.8rem;
    }

    .welcome-buttons {
        flex-direction: column; /* Revert to column on small screens */
    }

    .welcome-buttons .btn-large {
        font-size: 1rem;
        padding: var(--spacing-sm) var(--spacing-lg);
        min-height: 100px;
        /* Adjust min height for small screens */
    }

    .welcome-buttons .btn-large i {
        font-size: 2rem;
        /* Adjust icon size for small screens */
    }
}

/* Badge for Under Development */
.development-badge {
    position: absolute;
    top: -15px; /* Adjust this value to make it appear 'over' the button */
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex; /* Use flex to align content if needed */
    align-items: center;
    justify-content: center;
    padding: 0.3em 1em;
    border-radius: 999px; /* Pill shape */
    font-size: 0.8em; /* Slightly larger text */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap; /* Prevent text from wrapping */
    z-index: 10; /* Ensure it's above other elements */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Stronger shadow */
    border: 1px solid;
    transition: all 0.3s ease; /* Smooth transition for theme change */
}

/* Light theme colors for the badge */
.development-badge {
    background-color: #4a4a4a; /* Dark grey */
    color: var(--text-white); /* White text */
    border-color: #666; /* Slightly lighter border */
}

/* Dark theme colors for the badge */
body.dark-theme .development-badge {
    background-color: var(--welcome-dark-gold); /* Using the new variable for dark mode */
    color: var(--text-dark); /* Black text on gold */
    border-color: var(--primary-color); /* Darker gold border (from Ticketcommon.css) */
}

/* New Feature Badge */
.new-feature-badge {
    position: absolute;
    top: -15px; /* Adjust this value to control how much it overlaps the button */
    right: 15px; /* Position on the right side */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3em 0.8em;
    border-radius: 999px; /* Pill shape */
    font-size: 0.7em; /* Smaller text for the badge */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    z-index: 10; /* Ensure it's above other elements */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    border: 1px solid;
    animation: bounceAndFade 2s infinite ease-in-out; /* Animation */
    transform-origin: center bottom; /* For animation effect */
}

/* Light theme colors for the new badge */
.new-feature-badge {
    background-color: var(--primary-color); /* Blue background */
    color: var(--text-white); /* White text */
    border-color: var(--primary-dark); /* Darker blue border */
}

/* Dark theme colors for the new badge */
body.dark-theme .new-feature-badge {
    background-color: var(--accent-color); /* Yellow background */
    color: var(--text-black); /* Black text for contrast */
    border-color: var(--accent-dark); /* Darker yellow border */
}

/* Animation Keyframes */
@keyframes bounceAndFade {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(-5px) scale(1.05); /* Slight bounce up and enlarge */
        opacity: 0.8;
    }
}

/* Adjust button padding to ensure badge fits nicely without obscuring main content */
.welcome-buttons .btn-large {
    position: relative; /* Essential for positioning the absolute badge */
    padding-top: calc(var(--spacing-md) + 1em); /* Increase top padding to make space for the badge */
    padding-bottom: var(--spacing-md); /* Keep regular bottom padding */
}

/* Adjust icon and text margin for better spacing with the new badge */
.welcome-buttons .btn-large i {
    margin-bottom: 0; /* Remove original margin */
}

/* RTL adjustments for the new badge */
html[dir="rtl"] .new-feature-badge {
    left: 15px; /* Position on the left side in RTL */
    right: auto; /* Reset right position */
}


/* NEW: Custom styles for Arabic button text and icons on the welcome page */
html[dir="rtl"] .welcome-buttons .btn-large span {
    font-size: 1.2rem; /* Adjust as needed for Arabic text size */
}

html[dir="rtl"] .welcome-buttons .btn-large i {
    font-size: 3.2rem; /* Adjust as needed for Arabic icon size */
}

/* NEW: Adjust padding-top for buttons in Arabic (RTL) to prevent icon/badge clash */
html[dir="rtl"] .welcome-buttons .btn-large {
    padding-top: 55px; /* Increased padding-top for Arabic to accommodate larger icon and badge */
}


/*======================
    404 page
=======================*/


.page_404{ padding:40px 0; background:#fff; font-family: 'Arvo', serif;
}

.page_404  img{ width:100%;}

.four_zero_four_bg{
 
 background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
    height: 400px;
    background-position: center;
 }
 
 
 .four_zero_four_bg h1{
 font-size:80px;
 }
 
.four_zero_four_bg h3{
	font-size:80px;
}
			 
.link_404{			 
	color: #fff!important;
    padding: 10px 20px;
    background: #39ac31;
    margin: 20px 0;
    display: inline-block;}
.contant_box_404{ margin-top:-50px;}