html {scroll-behavior: smooth;}
.text-justify {text-align: justify;hyphens: auto;}
@media (min-width: 768px) {.text-md-justify {text-align: justify;hyphens: auto;}}

/* ------------------------------
   1) Hero Section – Fluid Typography
   ------------------------------ */

/* Main hero title */
.hero-title {
  font-size: clamp(2.4rem, 2vw + 1.2rem, 4.8rem);
  line-height: 1.1;
  font-weight: 700;
}

/* Hero paragraph */
.hero-lead {
  font-size: clamp(1.05rem, 0.9vw + 0.5rem, 1.7rem);
  line-height: 1.45;
  max-width: 55ch;
  text-align: justify;
}

.hero-developers {
  font-size: clamp(0.75rem, 0.7vw + 0.5rem, 1rem);
}

/* Buttons scale gracefully */
.hero .btn-lg {
  font-size: clamp(1rem, 0.4vw + 0.8rem, 1.3rem);
  padding: .8rem 2rem;
}


/* ------------------------------
   2) Hero Image + Parallax Scaling
   ------------------------------ */

.hero {
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  padding-left: 2rem;   /* prevents left clipping */
  padding-right: 2rem;  /* optional symmetry */
}

.hero-container {
  width: 130%;     /* gives room for JS scaling */
  justify-content: center;
  pointer-events: none;
  perspective: 1000px;  /* enables 3D effect */
}

.hero-img {
  width: 85%;
  /* This variable controls final scale (JS reads this!) */
  --hero-scale: 1;
  /* This is to control the initial page load scale */
  transform: scale(var(--hero-scale));
  transform-origin: center center;
  transition: transform 0.15s ease-out;
}

/* Large screen scaling */
@media (min-width: 1600px) {
  .hero-img {
    --hero-scale: 1.15;
  }
}

@media (min-width: 1920px) {
  .hero-img {
    --hero-scale: 1.25;
  }
}

/* Hide hero image on small devices */
@media (max-width: 768px) {
  .hero {display: none;}
}

.logo-max {
  max-width: 140px !important;
  width: 100%;
  height: auto;
}

/* ------------------------------
   3) Global Font Boost for Large Displays
   ------------------------------ */
@media (min-width: 1600px) {
  body { font-size: 1.1rem; }
}

@media (min-width: 1920px) {
  body { font-size: 1.15rem; }
}


/* ------------------------------
   4) Wider Containers on Big Screens
   ------------------------------ */

@media (min-width: 1600px) {
  .container,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1500px;
  }
}

@media (min-width: 1920px) {
  .container,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1700px;
  }
}


/* ------------------------------
   5) Features Section – Typography
   ------------------------------ */

#features h2 {
  font-size: clamp(2rem, 2vw + 1.2rem, 3rem);
}
/* Heading below the icon */
.feature h3 {
  font-size: clamp(1.5rem, 0.8vw + 1rem, 3rem); /* fluid typography */
  margin-top: 0.5rem;                    /* optional spacing */
}
.feature p {
  font-size: clamp(1rem, 0.4vw + 0.7rem, 1.2rem);
  line-height: 1.5;
}


/* ------------------------------
   6) Utility Styles
   ------------------------------ */

.divider {
  height: 0.125rem;
  background-color: rgba(0, 0, 0, .1);
  border: 0 solid rgba(0, 0, 0, .15);
  opacity: .4;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.feature-icon {
  width: clamp(3rem, 5vw, 6rem);   /* min 3rem, max 6rem, scales with viewport */
  height: clamp(3rem, 5vw, 6rem);
  border-radius: clamp(.75rem, 1vw, .95rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.feature-icon i {
  font-size: clamp(1.5rem, 3vw, 3rem); /* scales with viewport */
}

/* Hide feature-icon on small devices */
@media (max-width: 768px) {
  .feature .feature-icon {display: none !important;}
}

.icon-link > .bi {
  margin-top: .125rem !important;
  margin-left: .125rem !important;
  height: 100% !important;
  fill: currentcolor;
  transition: transform .25s ease-in-out;
}

.icon-link:hover > .bi {
  transform: translate(.25rem);
}