/* 
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-new.css');
@import url('module-css/footer-new.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-new.css');
@import url('module-css/copywriting-tool.css');
@import url('module-css/how-tool-work-new.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-new.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-new.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;
}
.price-note {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 51px;
  max-width: 970px;
  width: 100%;
}
.price-note h2{
  font-size: 32px;
  font-weight: 500;
  color: var(--thm-white);
  line-height: 42px;
}
.price-note ul li{
  list-style: disc;
  margin-top: 8px;
}
.price-note-title {
 position: relative;
    display: block;
    border-radius: 8px;
    background: #15152E;
    padding: 47px 90px 46px;
    margin-bottom: 32px;
  }
  .btn_icon {
    width: 30px;
    height: 30px;
    }
    .mt-2{
    margin-top:  0.5rem !important
    }
 .mb-2{
    margin-bottom:  0.5rem !important
    }
 .step{
  padding: 3px 8px;
  background: linear-gradient(211deg, #8F79FF 13.4%, #426BFF 118.74%);
  border-radius: 8px;
  margin-right: 10px;
  color: #FFF;
  font-weight: bold;
    }
    .video-row {
  display:flex;
  flex-wrap:wrap;
  margin-right:-.5px;
  margin-bottom:30px
}
.video-container {
  overflow:hidden;
  position:relative;
  width:100%
}
.video-container::after {
  padding-top:56.25%;
  display:block;
  content:''
}
.video-container iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%
}
  .vivid-procon {
    margin: 40px auto;
    display: flex;
    gap: 28px;
  }
  .vivid-procon .box {
    flex: 1;
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 0 15px rgba(0,0,0,0.12);
    transition: transform 0.3s ease;
  }
  .vivid-procon .box:hover {
    transform: translateY(-5px);
  }
  .vivid-procon .pros {
    background-color: #d1f2eb;
    border-left: 8px solid #27ae60;
    color: #145a32;
  }
  .vivid-procon .cons {
    background-color: #fdecea;
    border-left: 8px solid #e74c3c;
    color: #7b241c;
  }
  .vivid-procon h3 {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .vivid-procon ul {
    margin: 0;
    padding-left: 20px;
    line-height: 1.6;
  }
  .vivid-procon ul li {
    margin-bottom: 12px;
  }

  /* 响应式调整 */
  @media screen and (max-width: 768px) {
    .vivid-procon {
      flex-direction: column;
      gap: 20px;
      padding: 0 12px;
    }
    .vivid-procon .box {
      padding: 20px 16px;
      box-shadow: 0 0 12px rgba(0,0,0,0.1);
    }
    .vivid-procon ul {
      padding-left: 18px;
    }
  }
  
  .top-navbar {
    position: absolute;
    background-image: url('/images/banner/photopro-back-to-school-banner.jpg');
    background-size: cover;
    background-position: center;
    min-height: 80px;
    padding: 20px;
    
   
    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    color: white;
    overflow: hidden;
}

.top-navbar .overlay {
    position: absolute;
    top: 80; left: 20;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 1;
}

.top-navbar .container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;    
    align-items: center;
    gap: 20px;                   
    flex-wrap: wrap;            
    max-width: 1200px;
}

.top-navbar .top_navbar_text {
    font-size: 25px;
    font-weight: 500;
    text-align: center;
}

.top-navbar .special-title-off {
    font-weight: bold;
    font-size: 29px;
    color: #2CB5B0; 
    margin-left: 5px;
}

.top-navbar .top_navbar_btn a {
    display: inline-block;
    padding: 10px 22px;
    background-color: #2CB5B0;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.top-navbar .top_navbar_btn a:hover {
    background-color: #82c5fe;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .top-navbar .container {
        flex-direction: column;  
        gap: 10px;
    }
    .top-navbar .top_navbar_text {
        font-size: 16px;
    }
    .top-navbar .top_navbar_btn a {
        padding: 8px 18px;
    }
}
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

.popup-overlay.show {
    display: flex !important;
}

.popup-content {
    background: linear-gradient(to bottom, #2A0B3C 0%, #600D41 50%, #6702AC 100%);
    border-radius: 15px;
    max-width: 650px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    animation: slideIn 0.3s ease-out;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #FFFFFF;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 1001;
}

.close-btn:hover {
    color: #FFFFFF;
}

.popup-header {
    background: linear-gradient(70.6deg, rgb(172, 30, 255) 0.3%, rgb(65, 35, 251) 55.8%, rgb(35, 251, 224) 105.1%);
    color: white;
    padding: 2rem;
    text-align: center;
    border-radius: 15px 15px 0 0;
	line-height: var(--bs-body-line-height);
}

.popup-header .title,
.popup-body .title {
    font-size: 25px;
    font-weight: 700;
  background: radial-gradient(circle at 24.1% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  line-height: 1.8;
  font-family: 'Poppins', 'Arial Rounded MT Bold', sans-serif;
}

.popup-body {
    padding: 2rem;
    text-align: center;
}
.popup-body p {
    margin-bottom: 1rem;
    font-size: 20px;
    line-height: 1.6;
}
.popup-body img {
    margin: 15px 15px 20px;
    text-align: center;
}

.promo-code {
    background: #f8f9fa;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-weight: bold;
    color: #ee5a24;
    border: 2px dashed #ee5a24;
    display: inline-block;
    margin: 0.5rem;
}

.countdown {
    color: #FFFFFF
    font-weight: bold;
    padding-top: 20px;
    font-size: 20px;
}

#countdown-timer {
    color: #FE9551;
    font-size: 20px;
}

.popup-buttons {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.popup-buttons .buy-button{
display: block;
  width: 100%;
  background: #FFB84C;
  padding: 12px 0;
  border-radius: 8px;
  font-weight: 700;
  font-size: 17px;
  transition: opacity 0.2s;
  position: relative;
  z-index: 2;
  color: #230D56;
  text-align: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .popup-content {
        width: 95%;
        margin: 1rem;
    }
    
    .popup-header {
        padding: 1.5rem;
    }
    
    .popup-body {
        padding: 1.5rem;
    }
    
    .popup-buttons {
        flex-direction: column;
        align-items: center;
    }
}
.info-box {
  width: 100%;                    
  max-width: 100%;                
  border-left: 4px solid #0d6efd;
  background-color: #e7f1ff;       
  padding: 10px 15px;
  margin: 10px 0;
  border-radius: 4px;            
  line-height: 1.5;
  box-sizing: border-box;          
  display: flex;                   
  align-items: center;
}

.tip-bubble {
  display: inline-block;
  background-color: #fff3cd;       
  color: #856404;                 
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ffeeba;
  font-size: 18px;
  line-height: 1.4;
  margin: 5px 0;
  max-width: 100%;                
  box-sizing: border-box;
}
.tip-bubble .tip-icon {
  margin-right: 6px;
  font-size: 1.1em;
  vertical-align: middle;
}
 .recommend-inline {
    margin: 25px 0;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #eee;
    transition: background-color 0.3s ease;
    display: flex; 
    align-items: center; 
    padding: 15px;
    text-decoration: none;
    color: inherit;
}

.recommend-inline .recommend-image-wrapper {
    flex-shrink: 0; 
    height: 200px;
    margin-right: 20px;
    border-radius: 6px;
    overflow: hidden;
}

.recommend-inline .recommend-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recommend-inline .recommend-text-wrapper {
    flex-grow: 1;
}

.recommend-inline .recommend-title-inline {
    margin: 0 0 8px 0;
    font-size: 1.05em;
    font-weight: bold;
    color: #2c3e50;
}

.recommend-inline .recommend-excerpt-inline {
    margin: 0;
    font-size: 0.85em;
    color: #7f8c8d;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .recommend-inline {
        flex-direction: column;    
        align-items: flex-start;
        padding: 12px;
    }

    .recommend-inline .recommend-image-wrapper {
        width: 100%;           
        height: 160px;
        margin-right: 0;
        margin-bottom: 12px;
    }

    .recommend-inline .recommend-title-inline {
        font-size: 1em;
    }

    .recommend-inline .recommend-excerpt-inline {
        font-size: 0.85em;
    }
}


@media (max-width: 480px) {
    .recommend-inline {
        padding: 10px;
    }

    .recommend-inline .recommend-image-wrapper {
        height: 130px;          
    }

    .recommend-inline .recommend-title-inline {
        font-size: 0.95em;
    }

    .recommend-inline .recommend-excerpt-inline {
        font-size: 0.8em;
        line-height: 1.5;
    }
}