/************ 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');



/*** 
====================================================================
	
====================================================================
***/
.video-one {
  position: relative;
  height: 100vh;
}

.video-one__bg {
  background-image: url("../images/background/video-one-bg.webp");
  background-size: cover;
  background-position: center;
  height: 100%;
}

.video-one__inner {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-one__play {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 60px;
  color: #fff;
}

/* Overlay */
.video-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.video-overlay video {
  width: 90%;
  max-width: 1000px;
  border-radius: 10px;
}

/* Close button */
.video-close {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}


/* =========================================
   FX BORDER TRACE (clean + premium)
   ========================================= */
.fx-border-trace {
  position: relative;
  border-radius: 16px;
  isolation: isolate;
}

/* Soft permanent border */
.fx-border-trace::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.08)
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
  transition: opacity 0.35s ease;
}


/* Elegant hover glow */
.fx-border-trace::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;

  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255, 255, 255, 0.10) 35%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.10) 65%,
    transparent 80%
  );

  background-size: 250% 100%;
  background-position: 100% 0;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
  opacity: 0;

  transition: opacity 0.3s ease;
}


/* Hover */
.fx-border-trace:hover::before {
  opacity: 1;
}

.fx-border-trace:hover::after {
  opacity: 1;
  animation: fx-border-flow 2.4s ease-in-out infinite;
}


/* Slow premium movement */
@keyframes fx-border-flow {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -150% 0;
  }
}

/* =========================================================
   FEATURE ONE – WATER RIPPLE CIRCLES (FINAL VERSION)
   ========================================================= */

/* Create stacking context (NO layout change) */
.feature-one__main-content-box{
  position: relative;
}

/* Keep your existing overlays behind */
.feature-one__color-overly-1,
.feature-one__color-overly-2,
.feature-one__color-overly-3{
  position: absolute;
  z-index: 0;
}

/* Stars above overlays */
.feature-one__main-content-middle .feature-one__start-1,
.feature-one__main-content-middle .feature-one__start-2,
.feature-one__main-content-middle .feature-one__start-3,
.feature-one__main-content-bottom .feature-one__start-4,
.feature-one__main-content-middle .feature-one__start-5,
.feature-one__main-content-middle .feature-one__start-6,
.feature-one__main-content-middle .feature-one__start-7,
.feature-one__main-content-bottom .feature-one__start-8{
  position: absolute;
  z-index: 1;
}

/* =========================
   Ripple Rings (thin & many)
   ========================= */

.feature-one__main-content-box::before,
.feature-one__main-content-box::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.05);
  pointer-events: none;
  z-index: 2;

  /* very thin border */
  border: 0.6px solid rgba(255,255,255,.15);
  box-shadow: 0 0 8px rgba(255,255,255,.04);

  opacity: 0;
  animation: fxRipple 7.2s linear infinite;
}

/* Second ripple (delayed + softer) */
.feature-one__main-content-box::after{
  border-color: rgba(255,255,255,.11);
  box-shadow: 0 0 10px rgba(255,255,255,.035);
  animation-delay: 2.4s;
}

/* Extra faint rings (gives multiple circles look) */
.feature-one__main-content-box::before{
  box-shadow:
    0 0 8px rgba(255,255,255,.04),
    0 0 0 80px rgba(255,255,255,.035),
    0 0 0 160px rgba(255,255,255,.025),
    0 0 0 240px rgba(255,255,255,.015);
}

/* =========================
   Keep icon content on top
   ========================= */

.feature-one__main-content-top,
.feature-one__main-content-middle ul.feature-one__list,
.feature-one__main-content-bottom{
  position: relative;
  z-index: 3;
}

/* =========================
   Ripple Animation
   ========================= */

@keyframes fxRipple{
  0%{
    transform: translate(-50%, -50%) scale(0.05);
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  75%{
    opacity: .22;
  }
  100%{
    transform: translate(-50%, -50%) scale(150);
    opacity: 0;
  }
}

/* =========================
   Accessibility
   ========================= */

@media (prefers-reduced-motion: reduce){
  .feature-one__main-content-box::before,
  .feature-one__main-content-box::after{
    animation: none;
    opacity: .15;
    transform: translate(-50%, -50%) scale(120);
  }
}

.pricing-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.pricing-one__single{
  height: 100%;
}

/* Responsive */
@media (max-width: 1400px){
  .pricing-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px){
  .pricing-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px){
  .pricing-grid{ grid-template-columns: 1fr; }
}

.gradient-text {
  font-size: 44px;
  font-weight: 700;
  background: linear-gradient(
    45deg,
    #fff,
    
    #d9cfba
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Make all pricing cards same height */
.pricing-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.pricing-grid .pricing-one__single{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Keep the CTA button in the same position */
.pricing-grid .pricing-one__btn-box{
  margin-top: 12px;
  margin-bottom: 18px;
}

/* Make the list area take remaining space */
.pricing-grid .pricing-one__points{
  margin-top: 18px;
  flex: 1;
}

/* Prevent extra wrapping + unify spacing */
.pricing-grid .pricing-one__points p{
  margin: 0;
  line-height: 1.45;
}

/* Optional: keep “Popular” from pushing content down */
.pricing-grid .pricing-one__popular{
  position: absolute;
  top: 18px;
  right: 18px;
}
.pricing-grid .pricing-one__single{
  position: relative;
}

/* Responsive */
@media (max-width: 1400px){
  .pricing-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px){
  .pricing-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px){
  .pricing-grid{ grid-template-columns: 1fr; }
}




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