/* 
Lizar Business HTML Template 

*/
/************ TABLE OF CONTENTS ***************

1. Fonts
2. Reset
3. Global
4. Main Header / Two / Three
5. Main Slider / Two / Three
6. About One
7. Services One / Two / Three / Four
8. Project One / Two / Three
9. Testimonial One / Two / Three
10. Partners One
11. News One / Two
12. CTA One
13. Main Footer
14. Clients One / Two / Three
15. Counter One
16. News Three
17. InTouch One
18. Page Title
19. Banner One
20. Work One
21. Pricing One
22. Team One
23. Services Widgets
24. Services Detail
25. Our Projects
26. Projects Detail
27. Projects Widgets
28. Our Blog
29. Blog Widgets
30. Comment Form
31. Comment Box
32. Contact Info
33. Contact Form
34. Map

**********************************************/



/*** 
====================================================================
	Css Files
====================================================================
***/
@import url('01-global.css');
@import url('module-css/header.css');
@import url('module-css/footer.css');
@import url('module-css/feature.css');
@import url('module-css/solutions.css');
@import url('module-css/pricing.css');
@import url('module-css/brand.css');
@import url('module-css/collaboration.css');
@import url('module-css/testimonial.css');
@import url('module-css/faq.css');
@import url('module-css/free-trail.css');
@import url('module-css/copywriting-tool.css');
@import url('module-css/how-tool-work.css');
@import url('module-css/counter.css');
@import url('module-css/case.css');
@import url('module-css/banner.css');
@import url('module-css/gallery.css');
@import url('module-css/image-generator-tools.css');
@import url('module-css/art-and-image-tool.css');
@import url('module-css/amazing-art-tool.css');
@import url('module-css/create-something.css');
@import url('module-css/page-title.css');
@import url('module-css/about.css');
@import url('module-css/video.css');
@import url('module-css/team.css');
@import url('module-css/ai-product.css');
@import url('module-css/login.css');
@import url('module-css/reset-password.css');
@import url('module-css/contact.css');
@import url('module-css/blog.css');
@import url('module-css/career.css');
@import url('module-css/404.css');




@import url('02-bootstrap-select.min.css');
@import url('03-owl.css');
@import url('04-animate.css');
@import url('05-rtl.css');
@import url('06-custom-animate.css');
@import url('07-dark-body.css');
@import url('08-font-awesome.css');
@import url('09-icomoon.css');
@import url('10-jarallax.css');
@import url('11-preloader.css');
@import url('12-swiper.min.css');
@import url('13-odometer-theme-default.css');
@import url('14-jquery-ui.css');
@import url('15-magnific-popup.css');
@import url('../fonts/reey-font/stylesheet.css');



/*** 
====================================================================
	
====================================================================
***/


/* Sticy Header */
.want-sticky-header .main-header.fixed-header {
	position: relative !important;
	display: none;
}


/* Box Layout */
.box-layout .page-wrapper {
	max-width: 1390px;
	width: 100%;
	margin: 0 auto;
	padding: 15px;
	overflow: hidden;
	background-color: var(--thm-body-bg);
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.10);
}

.box-layout:before {
	position: fixed;
	content: '';
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	display: block;
	background: url(../images/partners/thm-pattern-2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.box-layout .slider-one_social-icons {
	display: none;
}

.box-layout .main-header-two__inner {
	margin: 0 0px;
}

/* Align the alert message content and the close button properly */
.alert {
    display: flex;
    justify-content: space-between;  /* Ensures space between message text and the close button */
    align-items: center;             /* Vertically centers the content */
}

.alert .close {
    margin-left: 10px;   /* Adds some space between the message text and the button */
}


.form-group {
    position: relative;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

/* Error state for form groups */
.form-group.error {
    margin-bottom: 2rem; /* Extra space for error message */
}

/* Input and textarea error states */
.form-group.error input,
.form-group.error textarea {
    border-color: #e74c3c !important;
    background-color: #fdf2f2 !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1) !important;
    animation: shakeError 0.5s ease-in-out;
}

/* Shake animation for errors */
@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Error icon color */
.form-group.error .contact-one__form-icon {
    color: #e74c3c !important;
    transform: translateY(-50%) scale(1.1);
    transition: all 0.3s ease;
}

/* Error message styling */
.form-group .error-message,
.form-group label.error {
    display: block !important;
    color: #e74c3c !important;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: rgba(231, 76, 60, 0.1);
    border-left: 3px solid #e74c3c;
    border-radius: 0 4px 4px 0;
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.3s ease;
    position: relative;
}

/* Error message icon */
.form-group .error-message:before,
.form-group label.error:before {
    content: "⚠";
    margin-right: 0.5rem;
    font-weight: bold;
}

/* Alternative error message styling with icon */
.form-group .error-message.with-icon,
.form-group label.error.with-icon {
    padding-left: 2rem;
    position: relative;
}

.form-group .error-message.with-icon:before,
.form-group label.error.with-icon:before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e74c3c' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") no-repeat;
    background-size: contain;
}

/* Error state for labels */
.form-group.error .contact-one__form-label {
    color: #e74c3c !important;
    font-weight: 600;
}

/* Required asterisk in error state */
.form-group.error .required {
    color: #e74c3c !important;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Success states for comparison */
.form-group.success input,
.form-group.success textarea {
    border-color: #27ae60 !important;
    background-color: #f8fff8 !important;
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1) !important;
}

.form-group.success .contact-one__form-icon {
    color: #27ae60 !important;
    transform: translateY(-50%) scale(1.1);
}

.form-group.success .contact-one__form-label {
    color: #27ae60 !important;
}

/* Success message */
.form-group .success-message {
    display: block;
    color: #27ae60 !important;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: rgba(39, 174, 96, 0.1);
    border-left: 3px solid #27ae60;
    border-radius: 0 4px 4px 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.form-group.success .success-message {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.form-group .success-message:before {
    content: "✓";
    margin-right: 0.5rem;
    font-weight: bold;
}

/* Focus states for error inputs */
.form-group.error input:focus,
.form-group.error textarea:focus {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.15) !important;
}

/* Textarea specific error styling */
.form-group.text-message-box.error textarea {
    border-color: #e74c3c !important;
    background-color: #fdf2f2 !important;
}

.form-group.text-message-box.error .contact-one__form-icon {
    top: 45px;
    transform: scale(1.1);
    color: #e74c3c !important;
}

/* Multiple errors styling */
.form-group .error-message + .error-message {
    margin-top: 0.25rem;
    border-top: 1px solid rgba(231, 76, 60, 0.2);
    padding-top: 0.5rem;
}

/* Form submission error */
.form-error-summary {
    background: #fdf2f2;
    border: 1px solid #e74c3c;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: #721c24;
}

.form-error-summary h4 {
    margin: 0 0 0.5rem 0;
    color: #e74c3c;
    font-size: 1rem;
    font-weight: 600;
}

.form-error-summary ul {
    margin: 0;
    padding-left: 1.5rem;
}

.form-error-summary li {
    margin-bottom: 0.25rem;
}

/* Loading state with error handling */
.form-group.error.loading input,
.form-group.error.loading textarea {
    pointer-events: none;
    opacity: 0.6;
}

/* Mobile responsive error messages */
@media (max-width: 768px) {
    .form-group .error-message,
    .form-group label.error {
        font-size: 0.8rem;
        padding: 0.2rem 0.5rem;
    }
    
    .form-group.error input,
    .form-group.error textarea {
        padding: 10px 35px 10px 12px;
    }
    
    .form-group.error .contact-one__form-icon {
        right: 10px;
        font-size: 0.9rem;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .form-group.error input,
    .form-group.error textarea {
        border-width: 3px !important;
        border-color: #d63031 !important;
    }
    
    .form-group .error-message,
    .form-group label.error {
        background: #d63031 !important;
        color: white !important;
        border-left-color: #2d3436 !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .form-group.error input,
    .form-group.error textarea {
        background-color: #2d1b1b !important;
        border-color: #e74c3c !important;
        color: #fff !important;
    }
    
    .form-group .error-message,
    .form-group label.error {
        background: rgba(231, 76, 60, 0.2) !important;
        color: #ff6b6b !important;
        border-left-color: #e74c3c !important;
    }
    
    .form-group.error .contact-one__form-label {
        color: #ff6b6b !important;
    }
}

/* Print styles - hide errors in print */
@media print {
    .form-group .error-message,
    .form-group label.error,
    .form-error-summary {
        display: none !important;
    }
    
    .form-group.error input,
    .form-group.error textarea {
        border-color: #333 !important;
        background-color: transparent !important;
    }
}

/* Accessibility improvements */
.form-group .error-message,
.form-group label.error {
    /* Screen reader friendly */
    role: alert;
    aria-live: polite;
}

/* Focus trap for error messages */
.form-group.error input:focus + .contact-one__form-icon + .error-message,
.form-group.error textarea:focus + .contact-one__form-icon + .error-message {
    outline: 2px solid #e74c3c;
    outline-offset: 2px;
}

/* jQuery Validation specific error styling */
label.error {
    display: block !important;
    color: #e74c3c !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    margin-top: 0.5rem !important;
    padding: 0.25rem 0.75rem !important;
    background: rgba(231, 76, 60, 0.1) !important;
    border-left: 3px solid #e74c3c !important;
    border-radius: 0 4px 4px 0 !important;
    font-family: inherit !important;
    text-transform: none !important;
}

/* Hide default error messages when using custom ones */
.form-group .error-message.hidden {
    display: none !important;
}

/* Show custom error messages */
.form-group.error .error-message.custom {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.form-group textarea {
  
    max-height: 160px !important;
}

@media (max-width: 768px) {
    .image-generator-tools .row {
        flex-direction: column !important;
    }

    .image-generator-tools .col-xl-3.col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 2rem;
    }

    .image-generator-tools .col-xl-1.col-lg-1 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem;
    }

    .image-generator-tools .col-xl-1.col-lg-1 .icon-arrow-right {
        transform: rotate(90deg);
        font-size: 2rem !important;
    }
}