@import "/assets/css/components/header.css";
@import "/assets/css/components/footer.css";
@import "/assets/css/components/innovation.css";
@import "/assets/css/pages/home.css";
@import "/assets/css/pages/about.css";
@import "/assets/css/pages/capabilities.css";
@import "/assets/css/pages/products.css";
@import "/assets/css/pages/careers.css";
@import "/assets/css/pages/partners.css";
@import "/assets/css/pages/contact.css";
@import "/assets/css/pages/consultancy.css";
@import "/assets/css/pages/cloud.css";
@import "/assets/css/pages/development.css";
@import "/assets/css/pages/devops.css";
@import "/assets/css/pages/ai.css";
@import "/assets/css/pages/job-description.css";
@import "/assets/css/base/typography.css";
@import "/assets/css/base/variables.css";
@import "/assets/css/layout/container.css";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
/* banner */
.hero-banner-section {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 80px 0;
}

.banner-img {
  height: calc(100vh - 80px);
}

.banner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero content */
.hero-banner-content {
  position: absolute;
  z-index: 2;
  max-width: 800px;
  bottom: clamp(32px, 10vw, 74px);
  left: clamp(16px, 5vw, 64px);
}
.hero-banner-content h1
{
  line-height: 60px;
}
.hero-banner-content h1,
.hero-banner-content p {
  color: #fff;
}

/* 🔽 Mobile override */
@media (max-width: 768px) {
  .hero-banner-section {
    height: 50vh;
    padding: 40px 0;
  }
.hero-banner-content h1 {
    line-height: 30px;
}
  .banner-img {
    height: 50vh;
  }
}