.elementor-2982 .elementor-element.elementor-element-61336f75 .elementor-menu-toggle{margin:0 auto;}.elementor-2982 .elementor-element.elementor-element-61336f75 .elementor-nav-menu--dropdown a, .elementor-2982 .elementor-element.elementor-element-61336f75 .elementor-menu-toggle{color:#000000;}.elementor-2982 .elementor-element.elementor-element-61336f75 .elementor-nav-menu--dropdown{background-color:var( --e-global-color-5135bec );}.elementor-2982 .elementor-element.elementor-element-61336f75 .elementor-nav-menu--dropdown a:hover,
					.elementor-2982 .elementor-element.elementor-element-61336f75 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-2982 .elementor-element.elementor-element-61336f75 .elementor-nav-menu--dropdown a.highlighted,
					.elementor-2982 .elementor-element.elementor-element-61336f75 .elementor-menu-toggle:hover{color:var( --e-global-color-5135bec );}.elementor-2982 .elementor-element.elementor-element-61336f75 .elementor-nav-menu--dropdown a:hover,
					.elementor-2982 .elementor-element.elementor-element-61336f75 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-2982 .elementor-element.elementor-element-61336f75 .elementor-nav-menu--dropdown a.highlighted{background-color:#000000;}.elementor-2982 .elementor-element.elementor-element-61336f75 .elementor-nav-menu--dropdown .elementor-item, .elementor-2982 .elementor-element.elementor-element-61336f75 .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:"broken console", Sans-serif;font-size:16px;font-weight:600;}.elementor-2982 .elementor-element.elementor-element-61336f75 div.elementor-menu-toggle{color:var( --e-global-color-5135bec );}.elementor-2982 .elementor-element.elementor-element-61336f75 div.elementor-menu-toggle svg{fill:var( --e-global-color-5135bec );}.elementor-2982 .elementor-element.elementor-element-61336f75{--nav-menu-icon-size:30px;}.elementor-2982 .elementor-element.elementor-element-61336f75 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-2982 .elementor-element.elementor-element-1963e656 .elementor-heading-title{color:var( --e-global-color-5135bec );}.elementor-2982 .elementor-element.elementor-element-1963e656 > .elementor-widget-container{margin:6% 0% 0% 0%;}.elementor-2982 .elementor-element.elementor-element-4dcf8b2 img{width:67%;max-width:66%;}.elementor-2982 .elementor-element.elementor-element-4dcf8b2 .widget-image-caption{color:var( --e-global-color-5135bec );font-family:"Press Start 2P", Sans-serif;font-weight:400;}.elementor-2982 .elementor-element.elementor-element-2eb608ce{color:var( --e-global-color-5135bec );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-2982 .elementor-element.elementor-element-c537a8a{color:var( --e-global-color-5135bec );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-2982 .elementor-element.elementor-element-59e3faa{color:var( --e-global-color-5135bec );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}body.elementor-page-2982:not(.elementor-motion-effects-element-type-background), body.elementor-page-2982 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}@media(max-width:767px){.elementor-2982 .elementor-element.elementor-element-7982f595{margin-top:-10%;margin-bottom:0%;padding:0px 0px 0px 0px;}}@media(min-width:768px){.elementor-2982 .elementor-element.elementor-element-169ab9cc{width:100%;}}/* Start custom CSS */body.no-scroll {
  overflow: hidden; /* Completely lock scrolling */
}

/*body {*/
  filter: blur(20px) grayscale(1); /* Apply blur and grayscale initially */
  transition: filter 2s ease-in-out; /* Smooth transition to focused state */
/*}*/

body.focused {
  filter: none; /* Remove blur and grayscale effects */
}

.click-area {
  cursor: pointer;
  pointer-events: auto; /* Make buttons interactive */
  z-index: 1000; /* Ensure visibility */
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2); /* Semi-transparent layer */
  backdrop-filter: blur(20px); /* Pixelate content underneath */
  z-index: 9999; /* Ensure it sits above everything else */
  pointer-events: none; /* Allow clicks to pass through */
  transition: backdrop-filter 2s ease-in-out, opacity 2s ease-in-out; /* Smooth transitions */
}

.overlay.hidden {
  opacity: 0; /* Fade out effect */
  pointer-events: none; /* Fully remove it after the effect */
  display: none; /* Prevent it from impacting the layout */
}

#frame-overlay {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999; /* Ensure it's always on top */
  pointer-events: none;
  transform: translateY(0); /* Initial position to avoid jump */
  transition: transform 2s ease-in-out, opacity 2s ease-in-out; /* Smooth slide and fade */
}

#frame-overlay.hidden {
  transform: translateY(-100%); /* Slide out upwards */
  opacity: 0; /* Fade out */
}

.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
    font-size: clamp(12px, 1.25vw, 22px) !important;
}

.elementor-widget-text-editor p code,
.elementor-widget-text-editor li code,
.elementor-widget-text-editor ul code,
.elementor-widget-text-editor ol code{
    color: #ffcf70 !important;
    font-family: inherit !important;
    font-style: italic;
}

.elementor-widget-text-editor p strong,
.elementor-widget-text-editor li strong,
.elementor-widget-text-editor ul strong,
.elementor-widget-text-editor ol strong {
    font-weight: 3000;
    color: #ffcf70
 !important;
;
}


/* Typing cursor for the temporary span */
.main-text span {
  font-family: inherit; /* Preserve parent font-family */
  font-size: inherit; /* Preserve font size */
  color: inherit; /* Preserve parent color */
  border-right: 2px solid #FFBB37; /* Blinking cursor with custom color */
  animation: blink 0.8s step-end infinite; /* Cursor blinking animation */
  
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

#frame-overlay img {
  width: 100%;
  height: 100%;
  background-size: cover;   /* Ensures buttons are always at the bottom */
  background-position: center top; /* Crop more
}

#menu {
  position: sticky;
  top: 0;
  z-index: 10000;
  background: black;
  color: white;
  padding: 10px; /* Padding inside the menu only */
  margin: 0; /* Ensure no external margin */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Optional: shadow for visibility */
}

.main-content {
  position: relative;
  top: 10%; 
  left: 50%; 
  transform: translateX(-50%);
  width: clamp(200px, 60%, 1600px);
  height: auto;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 0rem 2rem 3rem;
  border-radius: 10px;
  z-index: 1;
  overflow: hidden;
  margin-bottom: 5rem;
}

/* Buttons */
#custom-button1, #custom-button2, #custom-button3 {
  position: absolute;
  bottom: 0%;
  transform: translateX(-50%);
  width: clamp(60px, 12vw, 220px);
  height: clamp(40px, 4vw, 100px);
}

#custom-button1 {
  left: calc(50% - clamp(80px, 12vw, 220px)); /* Left button position */
}

#custom-button2 {
  left: 50%; /* Center button position */
}

#custom-button3 {
  left: calc(50% + clamp(80px, 12vw, 220px)); /* Right button position */
}


/* Responsive Styles: Portrait Mode */
@media (max-width: 768px) and (orientation: portrait) {
  #frame-overlay, 
  .click-area {
    display: none !important; /* Hide all frame and button elements */
  }

  .main-content {
    width: 100% !important; /* Make content responsive */
    padding: 0 !important;
    margin: 0 !important;
    background: none; /* Remove background */
    color: inherit; /* Use default text color */
  }
  
  #menu {
    display: block; /* Show the menu in portrait mode */
  }
  
}

/* Responsive Styles: Landscape Mode */
@media (max-width: 768px) and (orientation: landscape) {
  #frame-overlay {
    display: block !important; /* Ensure frame is visible */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    pointer-events: none; /* Prevent interaction */
  }

  #frame-overlay img {
    width: 100%;
    height: 100%;
    background-size: cover;
  }

  .click-area {
    display: block !important; /* Ensure buttons are visible */
    pointer-events: auto; /* Allow interaction */
    background: rgba(255, 0, 0, 0.3); /* Debug background */
  }

  .main-content {
  position: relative;
  top: 10%; 
  left: 50%; 
  transform: translateX(-50%);
  width: clamp(200px, 60%, 1600px);
  height: auto;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 2rem 2rem 3rem;
  border-radius: 10px;
  z-index: 1;
  overflow: hidden;
  margin-bottom: 5rem;
}

}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'broken console';
	font-style: oblique;
	font-weight: normal;
	font-display: auto;
	src: url('https://arezkhidr.com/wp-content/uploads/2025/01/broken-console-broken-console-bold-700.ttf') format('truetype');
}
/* End Custom Fonts CSS */