/**
 * Theme Name:     Hello Elementor Child
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:	   hello-elementor-child
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */
/* header css */ 
.open_side_menu {
    font-size: 25px !important;
}
.sticky-header {
    position: fixed;
    top: -110px;
    width: 1280px;
    left: 0;
    right: 0;
    margin: 10px auto;
    opacity: 0;
    z-index: 999;
    transition:
        top .65s cubic-bezier(.22,1,.36,1),
        opacity .45s ease;
}

.sticky-header.show {
    top: 0;
    opacity: 1;
}

.sticky-header.hide {
    top: -110px;
    opacity: 0;
}

.sticky-header.scrolled {
    box-shadow: 0 10px 35px rgba(0,0,0,.08);
} 

/* reels video css */
.reel-video-block {
  position: relative !important;
  width: 300px;
  height: 600px;
  overflow: hidden !important;
  border-radius: 16px;
  background: #000;
  display: block !important;
}

.reel-video-block > .elementor-widget-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  flex: none !important;
  transform: translateY(100%);
  z-index: 1;
}

.reel-video-block > .elementor-widget-video:first-child {
  transform: translateY(0%);
  z-index: 2;
}

.reel-video-block .e-hosted-video,
.reel-video-block .elementor-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* card track css */
.scroll-track {
  position: relative;
  min-height: 280vh;
  background: #fff;
  transition: background-color 0.6s ease;
}

.scroll-track.is-dark {
  background: #1a1a1a;
}
.scroll-track.is-dark .fixed-content h2{
    color: #fff !important;
}
.fixed-content {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-8vh);
}

.fixed-content .elementor-heading-title {
  color: #000;
  transition: color 0.6s ease;
}

.scroll-track.is-dark .elementor-heading-title {
  color: #fff;
}

.cards-wrap {
  position: relative;
  z-index: 5;
  margin-top: -100vh;
 padding: 50vh 0 140vh;
}

.anim-card {
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.anim-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* circular image carousel css */
.circular-row {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.circular-row .elementor-widget-image {
  position: absolute;
  width: 250px;
  height: 160px;
  border-radius: 15px;
  overflow: hidden;
  transform-origin: center center;
  transition: transform 0.3s ease;
}
.circular-row .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px){
.sticky-header {
    top: -60px;
    width: 95% !important;
}
.reel-video-block {
  width: 250px;
  height: 450px;
}
.cards-wrap {
 padding: 50vh 0 100vh;
}

}