/* 
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;
}

/* Free Trail */

/* Hidden form container */
.job-application-section {
    display: none;
    margin-top: 20px;
    padding: 20px;
    background: #111022;
    border: 1px solid #dce3ec;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease-in-out;
}

/* job card */
.job-application-section .form-group {
    margin-bottom: 15px;
}

.job-application-section label {
    font-weight: 500;
    color: #d7d7d7;
    display: block;
    margin-bottom: 6px;
}

.job-application-section input[type="text"],
.job-application-section input[type="email"],
.job-application-section input[type="tel"],
.job-application-section input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #c7d7e9;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border 0.3s;
    background: #e9e9e9;
}

.job-application-section input:focus {
    border-color: #0c4b8e;
}

/* Buttons */
.job-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
}

.btn-cancel {
    padding: 8px 18px;
    background: #ccc;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-cancel:hover {
    background: #aaa;
}

.btn-submit {
    padding: 8px 18px;
    background: linear-gradient(211deg, #8F79FF 13.4%, #426BFF 118.74%);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-submit:hover {
    background: #083a70;
}


/* Modal styles */
.modal {
  display: none; 
  position: fixed; 
  z-index: 9999; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  background: rgba(0,0,0,0.6); 
  justify-content: center; 
  align-items: center;
}

.modal-content {
  background: var(--thm-body-bg);

  padding: 25px;
  border-radius: 8px;
  width: 400px;
  max-width: 90%;
  text-align: center;
  position: relative;
  animation: fadeIn 0.3s ease-in-out;
  border: 1px solid #3c3c77;

}

.modal-content input {
  width: 100%;
  margin: 8px 0;
  padding: 10px;
  border: 1px solid #3c3c77;
  border-radius: 6px;

}

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
  background: transparent;
  color: #e9e9e9;
}

@keyframes fadeIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* compact inline error next to each input */
.fieldError {
  color: #ff6b6b;
  font-size: 12px;        /* smaller text */
  line-height: 1;
  margin-top: 4px;
  height: 16px;           /* reserve small space so layout doesn't jump */
  text-align: left;
  padding: 0;
  transition: opacity 0.12s ease;
  opacity: 1;
}

/* when there's no error, we still preserve the space but reduce opacity */
.fieldError.hidden {
  opacity: 0;
}

/* invalid input border + subtle ring */
.free-trail__input.invalid {
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 4px rgba(255,107,107,0.06);
}

/* reduce input vertical padding slightly to keep errors close */
.free-trail__input {
  padding: 8px 10px;
  font-size: 14px;
}

/* disabled submit button look */
.thm-btn-two[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

#formMessage { color: #f0f0f0; } /* neutral by default */

.thm-btn-two[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Thank you look */
#thankYouContent {
  color: #eaf6ff;
}
.thank-you-icon {
  font-size: 44px;
  margin: 6px 0;
}

/* responsive */
@media (max-width: 420px) {
  .modal-content { padding: 18px; width: calc(100% - 36px); }
  .thank-you-icon { font-size: 38px; }
}

/* visually-hidden helper */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.img-abot{
    width: 30%;
}