html {
  scroll-padding-top: 100px; /* adjust based on nav height */
}




  /* list */
  .product_list{
    text-align: center !important;
  }

  .product_subheading{
    text-align: center !important;
  }


  

 
 
 
 /* ecobee hero */
 .hero-ecobee-split {
  position: relative;
  min-height: 60vh;
  padding: 120px 0 60px;
  background: linear-gradient(to right, #f0f0f0 50%, #333 50%);
  overflow: hidden;
}
.hero-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  margin-left: -15%;
  z-index: 1;
}

.hero-inner {
  display: flex;
  flex-wrap: wrap;
}

/* Text section default */
.text-section {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #111;
}

.hero-subtext {
  font-size: 1.25rem;
  color: #444;
  max-width: 500px;
}

.hero-btn {
  margin-top: 20px;
  max-width: fit-content;
}

/* Image section default */
.image-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.hero-image {
  max-width: 120%;
  height: auto;
  margin-left: -10%;
}

/* Smart System Overview */
/* Ecobee system image styling */
.graphic-nomargen {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
  margin: 0 auto 30px auto;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Optional: adjust spacing between image and text */
#energy .col-md-6 h2 + img,
#energy .col-md-6 img + h2 {
  margin-top: 20px;
}



/* App section */
.integration-section {
  background-color: #ffffff;
}



/* feature section */
.features-section {
  background-color: #3A3A3A;  
  /* background-color: #D8D8D8; */
  color: white;
}

.features-section h2,
.features-section h5,
.features-section p {
  color: white;
}
.features-section .col-md-3 {
  padding-left: 20px;
  padding-right: 20px;
}


/* ========== TABLET & MOBILE STYLING ========== */


@media (max-width: 1200px) {
  .hero-ecobee-split {
    background: #fff !important;
    padding-top: 100px;
  }

  .text-section {
    text-align: center;
    align-items: center;
  }

  .hero-title,
  .hero-subtext {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-subtext {
    max-width: 90%;
    color: #333;
  }

  .hero-btn {
    margin: 20px auto 0;
    display: inline-block;
  }

  .hero-image {
    margin: 40px auto 0;
    max-width: 90%;
    display: block;
  }

  /* Force full width columns */
  .hero-inner .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 1200px) { /* Large screens */

 
  .hero-title {
    font-size: 5rem !important; /* Keep enforced size */
    text-align: left !important;
    padding-left: 12rem;
  }
  
  h2 {
    font-size: 46px !important;
  }

  .hero-ecobee-split {
    position: relative;
    min-height: 70vh !important;
  padding-top: 21rem !important;
    background: linear-gradient(to right, #f0f0f0 50%, #333 50%);
    overflow: hidden;
  }
}




@media (max-width: 1199px) { /* Medium screens */

  .hero-text-container {
      max-width: 650px;
    }
 
  .hero-title {
    font-size: 6rem !important;
    text-align: center !important;
  }
  .hero-description {
    font-size: 4.3rem !important;
    text-align: center;
    margin-right: 0;
  }
  #text{
    font-size: 66px !important;
  }
  .hero-text-container {
    max-width: 100%;
  }
  .header-image {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) { /* Small screens */
  .hero-title {
    font-size: 4rem !important;
    text-align: center !important;
  }

  #text-size{
    font-size: 46px !important;
  }
.hero-description {
    font-size: 3.3rem !important;
    text-align: center;
    padding-left: 0;
  }
  .header-image {
    max-width: 100%;
  }
  
}

@media (max-width: 991px) {
  .hero-ecobee-split {
    background: #fff !important;
    padding-top: 100px;
  }
  

  .text-section {
    text-align: center;
    align-items: center;
  }

  .hero-title,
  .hero-subtext {
    text-align: center;
  }

  .hero-subtext {
    max-width: 90%;
    color: #333;
  }

  .hero-btn {
    margin: 20px auto 0;
  }

  .hero-image {
    margin: 40px auto 0;
    max-width: 90%;
  }
  .features-section .col-md-3 p {
    text-align: center;
  }
}