html, body {
  margin: 0 !important;
  padding: 0 !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.background-layer-child {
  position: absolute;
  top: 19.73px;
  left: calc(50% + 404px);
  filter: blur(600px);
  border-radius: 50%;
  background-color: #0f5598;
  width: 847.3px;
  height: 799.4px;
  transform: rotate(90.6deg);
  transform-origin: 0 0;
  z-index: 2;
}
.background-layer {
  position: absolute;
  width: 99.45%;
  top: 63px;
  right: 0.31%;
  left: 0.25%;
  height: 877px;
  z-index: 2;
  pointer-events: none;
}

.metal-texture {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  object-fit: cover;
  opacity: 1;
  mix-blend-mode: overlay;
  z-index: 1;
}

.crypto-texture-icon {
  position: absolute;
  height: 99.9%;
  width: 100%;
  top: 0.1%;
  right: 0.35%;
  bottom: 0%;
  left: 0.07%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}
.logo-icon {
  width: 465px;
  position: relative;
  max-height: 100%;
  object-fit: cover;
}
.logo-constrains {
  width: 1440px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}
.hero-heading {
font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem);
  flex: 1;
  position: relative;
  text-shadow:
    0 0 12px #3fd3fc,
    0 0 32px #3fd3fc,
    1px 0 0 rgba(63, 211, 252, 0.7),
    0 1px 0 rgba(63, 211, 252, 0.7),
    -1px 0 0 rgba(63, 211, 252, 0.7),
    0 -1px 0 rgba(63, 211, 252, 0.7);
}

.heading-constrains {
  width: 1440px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  padding: 0px 10px 10px;
  box-sizing: border-box;
  min-width: 390px;
}
.contact-us {
  position: relative;
  width: 191px;
  height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #3ccff8;
  color: #09162b;
  border: 1.5px solid #b7d9fb;
  overflow: hidden;
  box-shadow: 0 0 4.8px #057ff9;
  cursor: pointer;
}

.contact-us-button {
  width: 189px;
  height: 49px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.learn-more {
  width: 100%;
  position: relative;
  box-shadow: 0px 0px 4.8px #00baff;
  border-radius: 10px;
  background-color: rgba(0, 200, 255, 0.1);
  border: 1px solid rgba(0, 186, 255, 0.15);
  box-sizing: border-box;
  height: 51px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  font-size: 18px;
  color: #fff;
  font-family: Inter;
}
.learn-more1 {
  position: relative;
  font-weight: 500;
}

.learn-more-button {
  width: 189px;
  height: 49px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.buttons-constrains {
  width: 1440px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  gap: 32px;
  font-size: 18px;
}

/* HERO button text: make responsive & single-line */
.contact-us-text,
.learn-more-text {
  white-space: nowrap;
  line-height: 1.1;
  font-weight: 600;
  font-size: clamp(0.88rem, 3.8vw, 1rem); /* allow smaller on narrow phones */
}

/* HERO button shells: a touch more horizontal room */
.contact-us-glow,
.learn-more {
  padding: 0 14px;                 /* was 16–18px */
  min-width: 0;                    /* let width % actually work */
}

@media (max-width: 375px) {
  .buttons-constrains {
    gap: 12px;
    justify-content: center;
  }
  /* two compact buttons side-by-side */
  .contact-us-glow,
  .learn-more {
    width: 46%;                    /* two columns with small gap */
    height: 44px;                  /* a touch shorter helps */
    padding: 0 10px;
  }
  .contact-us-text,
  .learn-more-text {
    font-size: clamp(0.82rem, 3.6vw, 0.95rem);
  }
}

/* (Optional) match About section button too, so EN/SV both fit */
.learn-more2 {
  font-size: clamp(0.9rem, 2.4vw, 1rem);
  white-space: nowrap;
  padding: 0 18px;
  min-width: 132px;
}

.hero-content-container {
  position: absolute;
  width: calc(100% - 8px);
  top: 148px;
  right: 4.43px;
  left: 3.57px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 11px;
}

.language-switcher {
  display: flex;
  align-items: center;
  height: 100%;
  cursor: pointer;
}
.navbar-item {
  width: 49.2px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9.5px;
  flex-shrink: 0;
}
.navbar-item1 {
  width: 91.3px;
  position: relative;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9.5px;
  flex-shrink: 0;
}
.navbar-item2 {
  width: 78.3px;
  position: relative;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9.5px;
  flex-shrink: 0;
}
.navbar-child {
  width: 1px;
  position: relative;
  border-right: 1px solid #fff;
  box-sizing: border-box;
  height: 25px;
}
.en {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.language-switcher {
  width: 38px;
  position: relative;
  height: 9px;
}
.navbar {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  padding: 0px 96px;
  gap: 20px;
}
.hero-container {
  position: absolute;
  width: 100%;
  top: 26px;
  right: 0.31%;
  left: 0.25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
  font-size: 16px;
  font-family: Inter;
}

.hero {
  position: relative;
  width: 100%;
  top: 0px;
  right: -0.31%;
  left: -0.25%;
  min-height: 100svh;
  height: auto;
  text-align: center;
  font-size: 36px;
  font-family: Orbitron;
  overflow: hidden;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.metal-texture1 {
  position: absolute;
  height: 100%;
  width: calc(100% + 8px);
  top: 0%;
  right: -4.43px;
  bottom: 0%;
  left: -3.57px;
}
.crypto-texture-icon1 {
  position: absolute;
  height: 100%;
  width: 100.14%;
  top: 0.1%;
  right: 0.04%;
  bottom: -0.1%;
  left: -0.18%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}
.landing-pages-that {
font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem);
  margin: 0;
  text-shadow:
    0 0 12px #3fd3fc,
    0 0 32px #3fd3fc,
    1px 0 0 rgba(63, 211, 252, 0.7),
    0 1px 0 rgba(63, 211, 252, 0.7),
    -1px 0 0 rgba(63, 211, 252, 0.7),
    0 -1px 0 rgba(63, 211, 252, 0.7);
}

.landing-pages-that2 {
  margin: 0;
}

.landing-page-heading-container {
  align-self: stretch;
  position: relative;
  font-size: 32px;
  display: flex;
  font-family: Orbitron;
  align-items: flex-end;
  height: auto;
  flex-shrink: 0;
  text-shadow: 1px 0 0 rgba(63, 211, 252, 0.5),
               0 1px 0 rgba(63, 211, 252, 0.5),
              -1px 0 0 rgba(63, 211, 252, 0.5),
               0 -1px 0 rgba(63, 211, 252, 0.5);
  min-width: 350px;
}
.landing-page-description {
  width: 100%;
  font-size: clamp(0.75rem, 1.1vw + 0.45rem, 1.125rem);
  position: relative;
  font-weight: 300;
  display: flex;
  align-items: center;
  height: auto;
  flex-shrink: 0;
  min-width: 350px;
  max-width: 720px;
}
/* Responsive About Us button */
.learn-more2 {
  width: clamp(128px, 34vw, 191px);
  height: clamp(40px, 5.5vw, 51px);
  padding: 0 16px;

  font-size: clamp(14px, 1.6vw + 0.4rem, 18px);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;

  border: 1.5px solid rgba(0, 186, 255, 0.35);
  background-color: rgba(0, 200, 255, 0.18);
  color: #00baff;
  box-shadow: 0 0 8px rgba(0, 186, 255, 0.35);

  cursor: pointer;
  transition: background 0.3s, color 0.2s, border-color 0.2s;
}

.learn-more2:hover,
.learn-more2:focus {
  background: #00eaff22;
  border-color: #3fd3fc;
  color: #ffffff;
}
.landing-page-text-container {
  flex: 1;
  height: 324px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  min-width: 359px;
  max-width: 600px;
}
.landing-page-section-container {
  position: absolute;
  width: 86.74%;
  top: calc(50% - 304px);
  right: 6.6%;
  left: 6.67%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  gap: 32px;
  max-width: 1400px;
  margin: 0 auto;
}
.landing-page-section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background-color: #09162b;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}
.website-icon {
  width: 609px;
  position: relative;
  height: 609px;
  object-fit: cover;
}
.website-heading {
  align-self: stretch;
  position: relative;
font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem);
  display: inline-block;
  font-family: Orbitron;
  min-width: 350px;
  text-shadow:
    0 0 12px #3fd3fc,
    0 0 32px #3fd3fc,
    1px 0 0 rgba(63, 211, 252, 0.7),
    0 1px 0 rgba(63, 211, 252, 0.7),
    -1px 0 0 rgba(63, 211, 252, 0.7),
    0 -1px 0 rgba(63, 211, 252, 0.7);
}

.website-description {
  width: 100%;
  position: relative;
  font-size: clamp(0.75rem, 1.1vw + 0.45rem, 1.125rem); 
  height: auto;
  font-weight: 300;
  font-family: Inter;
  color: #fff;
  text-align: left;
  display: flex;
  align-items: center;
  height: 134px;
  min-width: 350px;
  max-width: 720px;
}

.website-section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background-color: #09162b;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

.about-us-heading {
  align-self: stretch;
  position: relative;
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem);
  display: flex;
  height: auto;
  font-family: Orbitron;
  align-items: flex-end;
  height: 120px;
  flex-shrink: 0;
  text-shadow:
    0 0 12px #3fd3fc,
    0 0 32px #3fd3fc,
    1px 0 0 rgba(63, 211, 252, 0.7),
    0 1px 0 rgba(63, 211, 252, 0.7),
    -1px 0 0 rgba(63, 211, 252, 0.7),
    0 -1px 0 rgba(63, 211, 252, 0.7);
}

.about-us-description {
  width: 100%;
  position: relative;
  font-weight: 300;
  font-size: clamp(0.75rem, 1.1vw + 0.45rem, 1.125rem);
  height: auto;
  display: flex;
  align-items: flex-start;
  height: 134px;
  flex-shrink: 0;
  min-width: 200px;
  max-width: 720px;
  line-height: 1.5;
  text-align: left;
}

.about-us-description-container {
  width: 100%;
  position: relative;
  font-weight: 300;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  min-width: 200px;
  max-width: 720px;
  padding-bottom: 10px;
}
.learn-more6 {
  width: 191px;
  box-shadow: 0px 0px 4.8px #00baff;
  border-radius: 10px;
  background-color: rgba(0, 200, 255, 0.1);
  border: 1px solid rgba(0, 186, 255, 0.15);
  box-sizing: border-box;
  height: 51px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.about-us-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: center;
}
.about-us-text-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 1px 0px 40px;
  box-sizing: border-box;
  gap: 14px;
  min-width: 359px;
  height: auto;
}
.aboutus-icon-1 {
  width: 609px;
  position: relative;
  max-height: 100%;
  object-fit: cover;
}
.about-us-section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background-color: #09162b;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

.what-we-offer-section-child {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.service-image-background {
  position: absolute;
  top: 0px;
  left: 0px;
  box-shadow: 0px 4px 24px -1px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(40px);
  border-radius: 40px;
  background: linear-gradient(114.62deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  border: 1px solid #fff;
  box-sizing: border-box;
  width: 608px;
  height: 295px;
}
.noise-texture {
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 40px;
  width: 608px;
  min-height: 100vh;
  object-fit: cover;
  opacity: 0.1;
  mix-blend-mode: overlay;
}
.service-image-container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 608px;
  height: 295px;
}
.service-description {
  flex: 1;
  width: 100%;
  position: relative;
  font-size: 18px;
  font-weight: 300;
  font-family: Inter;
  color: #fff;
  text-align: center;
  display: inline-block;
  mix-blend-mode: overlay;
}

.service-description-container {
  position: block;
  width: 100%;
  height: 100%;
  top: calc(50% - 9.5px);
  right: 0%;
  left: 0%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0px 21px;
  box-sizing: border-box;
}
.service-title {
  position: absolute;
  width: 90%;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  letter-spacing: 0.1em;
  display: inline-block;
  font-family: Orbitron;
  mix-blend-mode: overlay;
  text-align: center;
}

.web-design {
  width: 608px;
  position: relative;
  height: 295px;
}

.services-container {
  position: relative;
  width: 100%;
  top: auto; right: auto; left: auto;
  right: 0%;
  left: 0%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  gap: 32px;
  padding: 40px 5vw;
}
.what-we-offer-section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background-color: #09162b;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}
.footer-heading {
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  width: 153px;
}
.footer-text-txt-container {
  width: 100%;
}
.footer-text {
  position: absolute;
  top: 23px;
  left: 0px;
  font-size: 13px;
  font-weight: 200;
  font-family: Montserrat;
  display: flex;
  align-items: center;
  width: 163px;
}
.footer-section {
  flex: 1;
  position: relative;
  height: 71px;
  max-width: 200px;
  width: 100%;
}
.footer-heading1 {
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 15px;
  font-family: Inter;
}
.footer-text1 {
  position: absolute;
  top: 21px;
  left: 0px;
  font-weight: 200;
}
.footer-text2 {
  position: absolute;
  top: 40px;
  left: 0px;
  font-weight: 200;
}
.footer-section1 {
  flex: 1;
  position: relative;
  height: 71px;
  max-width: 200px;
  font-size: 13px;
  font-family: Montserrat;
}
.footer-heading2 {
  position: absolute;
  top: 0px;
  left: 0px;
}
.footer-text3 {
  position: absolute;
  top: 23px;
  left: 0px;
  font-size: 13px;
  font-weight: 200;
  font-family: Montserrat;
}
.footer-content {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  padding: 20px;
  box-sizing: border-box;
  gap: 209px;
  min-width: 358px;
}
.footer-container {
  position: static;
  bottom: 0px;
  left: 0px;
  background-color: rgba(4, 11, 21, 0.6);
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 10px 0px;
  box-sizing: border-box;
  min-width: 358px;
  opacity: 0.5;
  margin-top: auto;
  z-index: 10;
}

/* Optional: tiny breathing room between CTA and footer (kept here) */
.cta-container { margin-bottom: 24px; }
.heading {
  align-self: stretch;
  position: relative;
  text-shadow:
    0 0 12px #3fd3fc,
    0 0 32px #3fd3fc,
    1px 0 0 rgba(63, 211, 252, 0.7),
    0 1px 0 rgba(63, 211, 252, 0.7),
    -1px 0 0 rgba(63, 211, 252, 0.7),
    0 -1px 0 rgba(63, 211, 252, 0.7);
}
.subheading {
  align-self: stretch;
  position: relative;
  font-size: 24px;
  font-weight: 300;
  font-family: Inter;
}
.heading-container {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 22px;
}
.form-icon-child {
  position: absolute;
  height: 99.67%;
  width: 100%;
  top: 0.33%;
  right: 0%;
  bottom: 0%;
  left: 0%;
  box-shadow: 0px 4px 24px -1px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(40px);
  border-radius: 10px;
  background: linear-gradient(114.62deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
}
.noise-texture4 {
  position: absolute;
  height: 98.67%;
  width: 99.67%;
  top: 0%;
  right: 0.17%;
  bottom: 1.33%;
  left: 0.16%;
  border-radius: 10px;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  opacity: 0.1;
  mix-blend-mode: overlay;
}
.form-icon {
  position: absolute;
  top: 0px;
  left: 0px;
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
  width: 30px;
  height: 30px;
}
.feature-icon-child {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 15px;
  height: 15px;
  mix-blend-mode: overlay;
}
.feature-icon {
  width: 30px;
  position: relative;
  height: 30px;
}
.feature-text {
  position: relative;
  font-weight: 500;
}
.feature-item {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.vector-icon {
  position: absolute;
  height: 50%;
  width: 50%;
  top: 26.67%;
  right: 23.33%;
  bottom: 23.33%;
  left: 26.67%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  mix-blend-mode: overlay;
}
.check-vector-icon {
  position: absolute;
  height: 40%;
  width: 46.67%;
  top: 30%;
  right: 26.67%;
  bottom: 30%;
  left: 26.67%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  mix-blend-mode: overlay;
}
.features-container {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  font-size: 18px;
  font-family: Inter;
}
.text-container {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 358px;
}


.form-container {
  flex: 1 1 400px;
}

@media (max-width: 768px) {
  .cta-container {
    flex-direction: column;
    align-items: center;
  }
}
.cta-container {
  flex: 1 0 auto;
  margin-bottom: 24px;
  position: relative;
  width: min(1400px, 90%);
  top: auto; right: auto; left: auto;
  margin: 0 auto;
  padding: 60px 24px;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2rem;
  font-size: 36px;
  font-family: Orbitron;
  max-width: 1400px;
  margin: 0 auto;
    display: flex;
  flex-wrap: wrap;
}
.cta-section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background-color: #09162b;
  align-items: center;
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  scroll-snap-stop: always; /* softened */
}
.apex-responsive {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #09162b;
  overflow: hidden;
  text-align: left;
  font-size: 18px;
  color: #fff;
  font-family: Inter;
  min-height: 100vh;
  overflow-x: hidden;
}

.texture-icon {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 0%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}
.crypto {
  width: 100%;
  position: relative;
  min-height: 100vh;
}

.background-stack {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0;
  pointer-events: auto;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #10274b  0%, #09162B 20%, #020509 100%);
}

.crypto-texture {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  object-fit: cover;
  pointer-events: none;
  mask-image: radial-gradient(
    circle at 50% 50%,
    rgba(255,255,255,0.13) 0%,
    rgba(255,255,255,0.05) 50%,
    transparent 90%
  );
  mask-size: 260px 260px;
  mask-repeat: no-repeat;
  mask-position: -9999px -9999px;
  transition: mask-position 0.1s;
  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    rgba(255,255,255,0.13) 0%,
    rgba(255,255,255,0.05) 50%,
    transparent 90%
  );
  -webkit-mask-size: 260px 260px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: -9999px -9999px;
  -webkit-transition: -webkit-mask-position 0.1s;
  opacity: 0.7;
}

.blur-cursor {
  pointer-events: none;
  position: fixed;
  top: 0; left: 0;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: linear-gradient(180deg, #3ccff8 0%, #118bb4 100%);
  opacity: 0.55;
  filter: blur(60px);
  z-index: 1000;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  display: none;
}

.hero-content-container,
.hero-container {
  pointer-events: none;
}

.contact-us-button,
.learn-more-button,
.navbar,
.language-switcher {
  pointer-events: auto;
}

.contact-us-text {
  color: #09162b;
  font-family: Inter;
  font-size: 18px;
  font-weight: 600;
}
.learn-more-text {
  color: #fff;
  font-family: Inter;
  font-size: 18px;
  font-weight: 600;
}

.buttons-constrains {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 32px;
  font-size: 18px;
  font-family: 'Inter', Arial, sans-serif;
}

.contact-us-glow,
.learn-more {
  position: relative;
    width: clamp(128px, 34vw, 191px);
  height: clamp(40px, 5.5vw, 51px);
    padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 600;
  font-size: clamp(14px, 1.6vw + 0.4rem, 18px);
  font-family: 'Inter', Arial, sans-serif;
  border: 1.5px solid #b7d9fb;
  background: #3ccff8;
  color: #09162b;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.3s, color 0.2s, border-color 0.2s;
  outline: none;
}

.contact-us-text { position: relative; z-index: 2; }

@keyframes pulse-border {
  0%, 100% {
    box-shadow: 0 0 0 0 #3fd3fc80, 0 0 0 0 #00eaff40;
  }
  50% {
    box-shadow:
      0 0 16px 6px #3fd3fc80,
      0 0 32px 16px #00eaff40;
  }
}

.contact-us-glow { animation: pulse-border 2s infinite; }

.contact-us-glow:hover, .contact-us-glow:focus {
  background: #59e6fa;
  border-color: #00eaff;
  color: #09162b;
}

.learn-more {
  border: 1.5px solid #00baff;
  background: rgba(0, 200, 255, 0.1);
  color: #00baff;
  font-weight: 500;
}

.learn-more:hover, .learn-more:focus {
  background: #00eaff22;
  color: #09162b;
  border-color: #3fd3fc;
}

.logo-constrains,
.heading-constrains,
.buttons-constrains {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

.hero,
.landing-page-section,
.website-section,
.about-us-section,
.what-we-offer-section,
.cta-section {
  min-height: 100vh;
  width: 100%;
  background-color: #09162b;
  align-items: center;
  justify-content: center;
}

.scroll-container {
  height: 100vh;
  width: 100%;
  overflow-y: scroll;
scroll-snap-type: y mandatory; /* or 'proximity' if you want softer */
}

.snap-section {
  min-height: 100vh;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: normal; /* softened from always */
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* Section shells handle the spacing */
.landing-page-section,
.website-section,
.about-us-section,
.what-we-offer-section {
  min-height: 100vh;
  padding-block: 120px;
}

/* Desktop default */
.hamburger,
.mobile-menu { display: none; }

.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  transform: translateY(-100%);
}

.hamburger,
.mobile-menu { pointer-events: auto; }

/* Fixed overlay shell (hidden by default) */
.site-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  transform: translateY(100%);
  transition: transform 280ms ease-out;
  z-index: 900;
  pointer-events: none; /* non-interactive while sliding */
}

/* When fully revealed, JS should add .interactive to enable clicks */
.site-footer.footer-visible { /* kept for backward compat, but non-interactive */ }
.site-footer.interactive { pointer-events: auto; }

/* Overlay footer appearance */
.site-footer .footer-container {
  margin-top: 0 !important;
  opacity: 0.9;
  background-color: rgba(4,11,21,0.9);
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .site-footer { transition: none; }
}


.navbar-item,
.navbar-item1,
.navbar-item2 {
  cursor: pointer;
}

/* --- TABLET (<=1080px) --------------------------------------------------- */
@media (max-width: 1080px) {

  html, body, .apex-responsive, .scroll-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

    .buttons-constrains { gap: 20px; }

  .landing-page-section,
  .website-section,
  .about-us-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }

  .landing-page-section .landing-page-section-container,
  .website-section .landing-page-section-container,
  .about-us-section .landing-page-section-container {
    position: relative !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    transform: none !important;
    margin: 0 auto !important;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;

    width: min(1100px, 92vw);
    padding: 40px 5vw;
  }

  .landing-page-text-container,
  .about-us-text-container {
    max-width: 640px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
  }

  .website-icon,
  .aboutus-icon-1 {
    flex: 0 1 clamp(280px, 60vw, 420px);
    max-width: clamp(280px, 60vw, 420px);
    width: 100%;
    height: auto;
    object-fit: contain;
    align-self: center;
  }

  .about-us-section .learn-more2 {
    background-color: rgba(0, 200, 255, 0.18) !important;
    border-color: rgba(0, 186, 255, 0.35) !important;
    box-shadow: 0 0 8px rgba(0, 186, 255, 0.35);
    position: relative;
    z-index: 1;
  }

  .what-we-offer-section {
    min-height: 100vh;
    padding: 40px 0;
    position: relative;
  }

  .services-container {
    position: relative; z-index: 2;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    gap: 50px;
    width: 100%;
    position: static;
    margin: 0 auto;
    padding: 0 5vw;
    top: auto !important; left: auto !important; right: auto !important;
  }

  .web-design {
    width: 100%;
    max-width: 520px;
    min-width: 0 !important;
    height: auto;
    min-height: 200px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 40px 20px 20px 20px;
    border-radius: 24px !important;
  }

  .service-image-container,
  .service-image-background,
  .noise-texture {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    height: auto;
    min-height: 200px;
    border-radius: 20px;
    object-fit: cover;
    box-sizing: border-box;
  }

  .service-title {
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: inherit;
    position: static !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    transform: none !important;
    width: 100%;
  }

  .service-title b,
  .service-title strong { display: inline; }

  .service-description-container {
    padding: 0;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }

  .service-description {
    font-size: 15px;
    width: 100%;
    mix-blend-mode: overlay;
    line-height: 1.45;
    text-align: center;
  }

  .what-we-offer-section-child {
    position: absolute;
    inset: -8% -6%;
    width: 112%;
    height: 116%;
    object-fit: cover;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
    opacity: 0.22;
    filter: saturate(120%) blur(0.3px);
    transform: translateZ(0);
  }
  .background-stack { z-index: 0; }

  .cta-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 60px 5vw 80px;
    scroll-snap-align: start;
  }

  .cta-container {
    order: 1;
    position: relative !important;
    top: auto !important;
    margin: 0 auto !important;
    width: min(1100px, 92vw);
    display: ;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
  }



  .footer-container {
    order: 2;
    position: static !important;
    width: 100%;
    height: auto;
    margin-top: 32px;
    padding: 16px 5vw;
    background-color: rgba(4, 11, 21, 0.6);
    z-index: 0;
    scroll-snap-align: end;
    scroll-snap-stop: always;
  }

  .footer-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 0;
    min-width: 0;
  }

  .footer-section, .footer-section1 {
    position: static;
    flex: 1 1 220px;
    max-width: 320px;
    height: auto;
  }

  .footer-heading1, .footer-heading2 {
    position: static !important;
    margin: 0 0 8px 0;
    font-size: 15px;
    line-height: 1.2;
  }

  .footer-text, .footer-text1, .footer-text2, .footer-text3 {
    position: static !important;
    margin: 0 0 4px 0;
    font-size: 13px;
    font-weight: 200;
    line-height: 1.4;
    width: auto;
  }

  .logo-icon {
    max-width: clamp(80px, 80vw, 440px);
    height: auto;
    object-fit: contain;
    display: block;
    background: transparent !important;
    margin: 0 auto;
  }

  .desktop-nav { display: none; }
  .desktop-nav { display: none !important; }

  .hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px; height: 20px;
    position: absolute; top: 18px; right: 24px;
    z-index: 1001;
    cursor: pointer;
    background: transparent; border: 0; padding: 0;
  }
  .hamburger span {
    width: 100%; height: 3px; border-radius: 2px;
    background: #00baff;
    transition: transform .3s ease, opacity .3s ease;
  }

  .mobile-menu {
    display: block;
    background: rgba(173, 235, 255, 0.95);
    backdrop-filter: blur(8px);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    z-index: 1000;
    transition: transform .4s ease;
  }

  .mobile-menu-list {
    list-style: none;
    margin: 16px 0 20px;
    padding: 16px 20px;
    display: flex; flex-direction: column;
    gap: 16px; align-items: center;
  }
  .mobile-menu a,
  .mobile-lang-switch {
    text-decoration: none;
    color: #09162b;
    font-weight: 600;
    font-size: 18px;
    background: transparent; border: 0;
  }

  .mobile-menu.active { transform: translateY(0); }

  .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburger.active span:nth-child(2) { opacity: 0; }
  .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* --- PHONE (<=600px) ------------------------------------------------------ */
@media (max-width: 600px) {
  .services-container { padding: 0 2vw; }
  .web-design { max-width: 98vw; padding: 20px 8px 16px 8px; border-radius: 14px !important; }
  .service-image-container, .service-image-background, .noise-texture { height: 80px; border-radius: 12px; }
  .service-title { font-size: 18px; }
  .service-description { font-size: 15px; }

  .cta-section { padding: 48px 5vw 60px; }
  .cta-container { gap: 20px; }

  .footer-content { flex-direction: column; gap: 0; align-items: flex-start; justify-content: flex-start; }

  .footer-section, .footer-section1 {
    flex: 0 0 auto !important;
    width: 100%;
    max-width: none;
    padding: 8px 5vw;
    height: auto !important;
    min-height: 0 !important;
    scroll-snap-align: none !important;
    margin: 0;
  }
  .footer-section:not(:last-child), .footer-section1:not(:last-child) { padding-bottom: 6px; }

  .footer-column { margin-bottom: 4px; }
  .footer-column h4, .footer-column p, .footer-column a { margin: 1px 0; line-height: 1.3; }
  .footer-section h4 { margin-bottom: 2px; }
  .footer-section p, .footer-section a { margin: 0 0 2px 0; line-height: 1.3; }

  .about-us-heading, .about-us-description { height: auto !important; }
  .about-us-description-container { display: block !important; padding-bottom: 8px; }
  .about-us-text-container { gap: 12px; }
  .about-us-description { line-height: 1.5; margin: 0 0 10px; overflow-wrap: anywhere; word-break: normal; }

  .what-we-offer-section-child {
    opacity: 0.28;
    inset: -12% -8%;
    width: 120%;
    height: 122%;
  }

  .scroll-container { scroll-snap-type: y proximity; scroll-padding-bottom: 12px; }

    .buttons-constrains { gap: 14px; }

}

/* --- MID RANGE About Us (820–1225px) ------------------------------------- */
@media (min-width: 820px) and (max-width: 1225px) {
  .about-us-heading, .about-us-description { height: auto !important; }
  .about-us-text-container { max-width: 620px; gap: 16px; padding: 0 0 12px 0; }

  .about-us-section .landing-page-section-container {
    position: static !important;
    top: auto !important;
    margin: 0 auto !important;
    transform: none !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    justify-content: center;
    width: min(1100px, 92vw);
    padding: 60px 5vw;
  }

  .aboutus-icon-1 {
    width: clamp(360px, 40vw, 520px);
    height: auto;
    flex: 1;
  }

  .about-us-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
}

:root { --footer-h: 120px; }

/* Desktop overlay */
@media (min-width: 1025px) {
  .site-footer {
    position: fixed;
    left: 0;
    right: var(--sbw, 0px);
    bottom: 0;
    transform: translateY(100%);
    transition: transform 280ms ease-out;
    z-index: 900;
  }
  .site-footer.footer-visible { /* keep for compatibility */ }
}

/* Mobile/tablet: normal in-flow footer */
@media (max-width: 1024px) {
  .site-footer {
    position: static !important;
    transform: none !important;
    transition: none !important;
    z-index: auto !important;
    pointer-events: auto !important;
  }
  .cta-section { padding-bottom: 120px; } /* or var(--footer-h) */
}

.scroll-container {
  -ms-overflow-style: none;  /* IE & old Edge */
  scrollbar-width: none;     /* Firefox */
}

.scroll-container::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, new Edge */
}

/* ===== CTA FORM (scoped) ============================================= */
.cta-form {
  position: relative;
  width: min(92vw, 520px);      /* same footprint as your old CTA card */
  max-width: 520px;
  margin-inline: auto;          /* hard center horizontally */
  display: grid;
  place-items: center;
  z-index: 1;
}

/* Glass card shell (matches Contact page styling) */
.cta-form-card {
  position: relative;
  width: 100%;
  padding: 24px 16px;           /* comfy on phones */
  border-radius: 20px;
  box-sizing: border-box;
}

.cta-form-card .card-bg {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: 0px 4px 24px -1px rgba(0,0,0,0.2);
  backdrop-filter: blur(40px);
  background: linear-gradient(112.71deg, rgba(54,114,156,0.3), rgba(9,22,43,0.3));
  border: 1px solid rgba(255,255,255,0.7);
  z-index: 0;
}
.cta-form-card .card-noise {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.10;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

/* Form body (Contact page field look, stacked layout for narrow space) */
.cta-form form {
  position: relative;
  z-index: 1;
  width: min(94%, 460px);       /* inner gutter */
  margin-inline: auto;
  display: grid;
  gap: 14px;                    /* vertical rhythm */
  color: #00c7ff;
  font-size: 13px;
}

/* Fields */
.cta-form .field { display: grid; gap: 6px; }
.cta-form .label { letter-spacing: 0.1em; line-height: 1.2; text-align: left; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;}

/* Inputs — same glass look as Contact page */
.cta-form .input,
.cta-form .textarea {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0px 4px 24px -1px rgba(0,0,0,0.2);
  backdrop-filter: blur(40px);
  background: linear-gradient(114.62deg, rgba(255,255,255,0.32), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.8);
  color: #eaf9ff;
  outline: none;
  box-sizing: border-box;
}
.cta-form .input   { height: 42px; padding: 0 12px; }
.cta-form .textarea{ min-height: 124px; padding: 10px 12px; resize: vertical;font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

.cta-form .input::placeholder,
.cta-form .textarea::placeholder { color: #b7d9fb; }

/* Submit button — matches your buttons */
.cta-form .submit {
  width: min(92%, 260px);
  height: 51px;
  margin: 6px auto 0;
  border-radius: 10px;
  background-color: #3ccff8;
  color: #09162b;
  border: 1.5px solid #b7d9fb;
  box-shadow: 0 0 4.8px #057ff9;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  transition: background .2s, transform .1s, border-color .2s;
}
.cta-form .submit:hover { background: #59e6fa; border-color: #00eaff; }
.cta-form .submit:active { transform: translateY(1px); }

/* Micro-layout at breakpoints (keeps centering perfect) */
@media (max-width: 1080px) {
  .cta-form { width: min(92vw, 480px); }
}
@media (max-width: 600px) {
  .cta-form        { width: 94vw; max-width: 360px; }
  .cta-form-card   { padding: 18px 14px; }
  .cta-form form   { width: 100%; }
}

/* === Small phones fix (<=375px) ===================================== */
@media (max-width: 600px) {
  /* remove rigid minimums that cause horizontal overflow */
  .text-container,
  .landing-page-text-container,
  .about-us-text-container {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* keep CTA stack centered */
  .cta-container {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 16px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* form shell widths — 90% of screen, centered */
  .cta-form,
  .form-shell {
    width: 90vw !important;
    max-width: 90vw !important;
    margin: 0 auto !important;
  }

  /* card and inner form comfort on tiny screens */
  .cta-form-card,
  .form {
    padding: 16px 14px !important;
  }

  /* inputs/textareas scale cleanly */
  .cta-form .input,
  .form .input {
    height: 44px !important;
    padding: 0 10px !important;
  }
  .cta-form .textarea,
  .form .textarea {
    padding: 8px 10px !important;
    min-height: 112px !important;
  }

  /* submit spans full form width */
  .cta-form .submit,
  .form .submit {
    width: 100% !important;
    max-width: 100% !important;
  }
}