/*
Theme Name: Hello Elementor Child
Theme URI:  https://saddamlive.com/
Author:     Saddam
Author URI: https://saddamlive.com/
Description: Child theme for Hello Elementor
Version:    1.0
Template:   hello-elementor
Text Domain: hello-elementor-child
*/


:root {
  --header-height: 80px; /* Desktop sticky header */
}

@media (max-width: 1024px) {
  :root {
    --header-height: 60px; /* Tablet */
  }
}

@media (max-width: 767px) {
  :root {
    --header-height: 60px; /* Mobile */
  }
}

.elementor-widget-off-canvas {
    --e-off-canvas-animation-duration: 200ms!important;
    
}


/* Target the SVG inside your button */
.fiverr-button .elementor-button-icon svg {
    width: 46px;       /* Set desired width */
    vertical-align: middle; /* Align with text */
}

.skill-badge {
  display: inline-block;
  background-color: #1E1E1E;
  color: #a3a3a3;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  margin: 4px; /* space between badges */
  white-space: nowrap;
}


html {
  scroll-behavior: smooth;
}

/* Adjust section scroll position for sticky header */

[id]:target {
  scroll-margin-top: 80px;
}

@media (max-width: 1024px) {
  [id]:target {
  scroll-margin-top: 60px;
  }
}

@media (max-width: 767px) {
  [id]:target {
  scroll-margin-top: 60px;
  }
}

/* Fix sticky header overlap on Hello Elementor */
@media (max-width: 1024px) {
  #site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99999 !important;
    background-color: #fff; /* ensure it's opaque, adjust if needed */
  }

  /* Push body down equal to header height */
  body {
    padding-top: 60px; /* adjust this to your header height */
  }
}


/* ===== Hero Section ===== */
.hero-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #03121d, #1e1c1e);
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* will be adjusted by JS */
  z-index: 1;
}

/* Canvas stays behind content */
.hero-section canvas.hero-bg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}