/**
 * Theme Name:     Hello Elementor Child
 * Author:         Ahsan Alam
 * 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.
 * Theme URI:      https://charmingtheme.com/
 * Author URI:     https://www.artintechsolution.com
 */
/* =========================
   DISABLE PAGE SCROLL
========================= */
body.menu-open {
  overflow: hidden;
  height: 100vh;
}

/* =========================
   OPTIONAL MENU SCROLL
========================= */
.burger-navigation {
  overflow-y: auto;
}

/* (optional) add this code in the right container in order to get the scroll on the y axes */
@media only screen and (max-width: 760px) {
  .cont {
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 150px;
  }
}

@media only screen and (max-width: 360px) {
  .cont {
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 20px;
  }
}

/* =========================
   ICON LIST STYLE
========================= */
selector .elementor-icon-list-item span:nth-child(2) {
  color: red;
}

span > svg {
  padding-right: 3rem;
  color: red;
}

/* =========================
   GLASS EFFECT
========================= */
.conty {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

/* =========================
   BURGER BUTTON
========================= */
.burger-button {
  color: #fff;
  display: flex;
  height: 18px;
  cursor: pointer;
  position: relative;
  z-index: 9999;
}

/* (change template number if needed) */
.elementor-2688 {
  width: 100%;
  animation: fadeInRight 1s ease-in-out;
}

/* =========================
   NAVIGATION PANEL
========================= */
.burger-navigation {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(100%);
  transition: all 0.5s ease-out;
  width: 100%;
  height: 100vh;
  z-index: 100;
}

/* =========================
   BURGER ICON
========================= */
.burger-button .burger {
  position: relative;
}

.burger-button .burger span {
  display: block;
  height: 2px;
  width: 28px;
  background: #fff;
  transform-origin: 50% 50%;
  transition: all 0.1s 0.2s ease, transform 0.2s ease;
}

.burger-button .burger span:nth-child(2) {
  transform: translate(0, 6px);
}

.burger-button .burger span:nth-child(3) {
  transform: translate(0, 12px);
}

/* =========================
   HIDDEN CHECKBOX
========================= */
.burger-nav_control {
  position: absolute;
  left: -9999px;
  width: 100%;
  clip: rect(0, 0, 0, 0);
}

/* =========================
   MENU OPEN STATE
========================= */
.burger-nav_control:checked ~ .burger-navigation {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.3s, opacity 0.3s;
}

.burger-nav_control:checked ~ .burger-button .burger span:first-child {
  opacity: 0;
}

.burger-nav_control:checked ~ .burger-button .burger span:nth-child(2) {
  transform: translate(0, 6px) rotate(45deg);
}

.burger-nav_control:checked ~ .burger-button .burger span:nth-child(3) {
  transform: translate(0, 4px) rotate(-45deg);
}

/* =========================
   ANIMATION
========================= */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(300px);
  }
  to {
    opacity: 1;
  }
}

/* Default header state */
.cs-main-menu-header {
  position: relative;
  transition: all 0.3s ease;
}

/* Sticky state (on scroll) */
@media (min-width: 1025px) {
  .cs-main-menu-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

    background: #0A0F1D; /* change if needed */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-bottom-width: 1px;
    border-style: solid;
    border-color: rgb(255 255 255 / 0.1);
  }
}