body{
  font-family:'Inter',sans-serif;
  margin:0;
}

/* HEADER */
.header{
  padding:6px 0;
  background:#fff;
  z-index:999;
}

.header.fixed{
  position:fixed;
  top:0;
  width:100%;
  box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

.logo{ height:75px; }

/* HERO */
/* =========================
   HERO SECTION (FULL BLOCK)
========================= */
body{
  font-family:'Inter',sans-serif;
  margin:0;
}

/* HEADER */
.header{
  padding:7px 0;
  background:#fff;
}

.logo{
  height:75px;
}
/* HERO */
/* HERO */
.hero{
  position:relative;
  background:url('../images/welcome-bg.webp') center/cover no-repeat;
  padding:40px 0 60px;
}

.hero .overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.7);
}
.text-light-green {
    color: #90ee90;
  }
.hero .container{
  position:relative;
  z-index:2;
}

/* TITLE */
.hero-title{
  line-height: 70px;
  margin-bottom:10px;
}

.hero-subtitle{
  font-size:18px;
  opacity:0.9;
}

/* LEFT */
.hero-left h2{
  font-size:28px;
}

.hero-left p{
  font-size:16px;
}

/* BULLETS */
.hero-points{
  list-style:none;
  padding:0;
}

.hero-points li{
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(255,255,255,0.08);
  padding:14px;
  border-radius:10px;
  margin-bottom:12px;
  box-shadow:0 10px 25px rgba(0,0,0,0.25);
  transition:0.3s;
}

.hero-points li:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,0.15);
}

.hero-points i{
  color:#00e676;
  min-width:20px;
}

/* FORM */
.form-box{
  background:#fff;
  padding:50px;
  border-radius:12px;
  box-shadow:0 25px 60px rgba(0,0,0,0.25);
}

.form-title{
  font-weight:700;
  font-size:22px;
  margin-bottom:15px;
}

/* INPUT (NO BOOTSTRAP CONFLICT) */
.form-input{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #ccc;
  border-radius:8px;
  padding:0 12px;
  margin-bottom:12px;
  background:#fff;
  height:48px;
  transition:0.3s;
}

.form-input span{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#1976d2;
  font-size:16px;
  flex-shrink:0;
}

.form-input i{
  line-height:1;
}

.form-input input{
  border:none;
  outline:none;
  width:100%;
  height:100%;
  font-size:15px;
  background:transparent;
}

.form-input input::placeholder{
  color:#777;
}

.form-input:focus-within{
  border-color:#1976d2;
  box-shadow:0 0 0 3px rgba(25,118,210,0.15);
}


/* =========================
   PREMIUM BUTTON (FIXED)
========================= */

/* COMMON */
.btn-fill,
.cta-btn-fill{
  position:relative;
  display:inline-block;
  border-radius:8px;
  font-weight:600;
  text-align:center;
  overflow:hidden;
  cursor:pointer;
  z-index:1;
  transition:all 0.3s ease;
}

/* FORM BUTTON */
.btn-fill{
  width:100%;
  padding:16px;
  font-size:18px;
  border:none;
  color:#fff;
  background:linear-gradient(45deg,#e53935,#b71c1c); /* RED */
}

/* CTA BUTTON */
.cta-btn-fill{
  padding:16px 35px;
  color:#fff;
  background:linear-gradient(45deg,#e53935,#b71c1c);
  text-decoration:none;
}

/* TEXT */
.btn-fill span,
.cta-btn-fill span{
  position:relative;
  z-index:2;
}

/* HOVER FILL EFFECT */
.btn-fill::before,
.cta-btn-fill::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:#ffffff;
  opacity:0.15;
  transition:all 0.4s ease;
  z-index:1;
}

.btn-fill:hover::before,
.cta-btn-fill:hover::before{
  left:0;
}

/* HOVER */
.btn-fill:hover,
.cta-btn-fill:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 35px rgba(0,0,0,0.3);
}

/* CLICK */
.btn-fill:active,
.cta-btn-fill:active{
  transform:scale(0.97);
}

/* CTA EXTRA */
.cta-btn-fill{
  box-shadow:0 10px 25px rgba(229,57,53,0.4);
}

.cta-btn-fill:hover{
  box-shadow:0 18px 40px rgba(229,57,53,0.6);
}
/* INPUT ERROR STATE */
.form-input.input-error{
  border-color:#e53935 !important;
  box-shadow:0 0 0 3px rgba(229,57,53,0.18);
  background:#fff8f8;
}

.form-input input.input-error{
  border:none !important;
  box-shadow:none !important;
}

/* REMOVE ERROR ON FOCUS */
.form-input input:focus{
  border:none;
  outline:none;
}

/* SMOOTH TRANSITION */
.form-input{
  transition:all 0.3s ease;
}
/* STEP */
.hidden{
  display:none !important;
}

.step-note{
  font-size:12px;
  text-align:center;
  margin-top:8px;
  color:#777;
}

.step-error-box{
  margin:0 0 10px;
  color:#e53935;
  font-size:13px;
}

.step-error-box ul{
  margin:0;
  padding-left:18px;
}

/* PROGRESS */
.progress{
  height:8px;
  border-radius:10px;
  overflow:hidden;
}

.progress-bar{
  background:linear-gradient(90deg,#4caf50,#00c853);
}

/* MOBILE */
@media(max-width:768px){

  .hero{
    padding:30px 0 40px;
  }

  .hero-title{
    font-size:32px;
        line-height:40px;
  }

  .hero-subtitle{
    font-size:15px;
  }

  .form-box{
    margin-top:0px;
  }

  .hero .row{
    display:flex;
    flex-direction:column;
  }

  /* FORM FIRST */
  .hero .col-lg-6:last-child{
    order:1;
  }

  .hero .col-lg-6:first-child{
    order:2;
    margin-top:25px;
  }
}
/* PROMO */
.promo-bar{
  background:#ec1c22;
  color:#fff;
  padding:6px 0px;
}

.promo-bar h2{
  
  font-weight:800;
}

/* SECTION */
.section{
  padding:80px 0;
}

/* BENEFITS */
/* SECTION */
.section{
  padding:80px 0;
}

.benefits-section{
  background:#fff;
}

/* SUBTITLE */
.section-subtitle{
  color:#666;
  font-size:16px;
}

/* ROW SPACING */
.benefit-row{
  --bs-gutter-x:3rem;
}

/* CARD */
.benefit-card{
  background:#fff;
  padding:35px 25px;
  border-radius:14px;
  border:1px solid #dddcdc;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
  transition:all 0.35s ease;
  height:100%;
  position:relative;
  overflow:hidden;
}

/* BOTTOM ACCENT LINE (HIDDEN) */
.benefit-card::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0%;
  height:4px;
  background:#1976d2;
  transition:0.35s;
}

/* ICON */
.benefit-icon{
  width:70px;
  height:70px;
  margin:0 auto 20px;
  border-radius:50%;
  background:#f1f5f9;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.3s;
}

.benefit-icon i{
  font-size:28px;
  color:#0b3c6f;
  transition:0.3s;
}

/* TEXT */
.benefit-card h4{
  font-size:26px;
  margin-bottom:10px;
  font-weight:600;
  color:#222;
}

.benefit-card p{
  font-size:15px;
  color:#666;
  margin:0;
}

/* HOVER EFFECT */
.benefit-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 45px rgba(0,0,0,0.15);
  border-color:#dbeafe;
}

/* SHOW BOTTOM LINE */
.benefit-card:hover::after{
  width:100%;
}

/* ICON HOVER */
.benefit-card:hover .benefit-icon{
  background:#e3f2fd;
}

.benefit-card:hover .benefit-icon i{
  color:#1976d2;
}

/* MOBILE */
@media(max-width:768px){

  .section{
    padding:60px 0;
  }

  .benefit-row{
    --bs-gutter-x:1.2rem;
  }

  .benefit-card{
    padding:25px 20px;
  }
}
/* SECTION */
/* SECTION BACKGROUND */
.appliance-section{
  background:#f4f4f4; /* light gray */
  border-top:1px solid #e9e9e9;
}

/* SUBTITLE */
.section-subtitle{
  color:#666;
  font-size:16px;
}

/* IMAGE */
.appliance-image img{
  width:100%;
  border-radius:12px;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
}

/* LIST GRID (2 COLUMN) */
.appliance-list{
  list-style:none;
  padding:0;
  margin:0;
}

.appliance-list.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 20px;
}

/* ITEM */
.appliance-list li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  color:#333;
  padding:8px 0;
  border-bottom:1px solid #e5e7eb;
}

/* ICON */
.appliance-list i{
  color:#1976d2;
  font-size:13px;
  min-width:16px;
}

/* HOVER */
.appliance-list li:hover{
  color:#1976d2;
}

/* MOBILE */
@media(max-width:768px){

  .appliance-list.two-col{
    grid-template-columns:1fr; /* single column */
  }

}

/* ICON */
.appliance-list i{
  color:#1976d2;
  font-size:14px;
  min-width:18px;
}

/* HOVER EFFECT */
.appliance-list li:hover{
  background:#e3f2fd;
  transform:translateX(5px);
}

/* MOBILE */
@media(max-width:768px){

  .appliance-section{
    text-align:center;
  }

  .appliance-list li{
    justify-content:center;
  }

}
/* CTA */
.cta{
  position:relative;
  background:url('../images/cta-bg.jpg') center/cover no-repeat;
  color:#fff;
  padding:100px 0;
}

.cta .overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.75);
}

.cta .container{
  position:relative;
  z-index:2;
}

.cta-btn{
  background:#ff1744;
  padding:15px 30px;
  color:#fff;
  border-radius:8px;
  display:inline-block;
}

/* FOOTER */
.footer{
  background:#fff;
  padding:60px 0 40px;
  border-top:1px solid #eee;
}

/* LOGO */
.footer-logo{
  max-height:55px;
  margin-bottom:20px;
}

/* TEXT */
.footer-text{
  font-size:13px;
  color:#555;
  line-height:1.6;
  max-width:900px;
  margin:0 auto 15px;
}

/* LINKS */
.footer-links{
  margin:20px 0;
  font-size:14px;
}

.footer-links a{
  color:#1976d2;
  text-decoration:none;
  margin:0 5px;
  transition:0.3s;
}

/* HOVER EFFECT */
.footer-links a:hover{
  text-decoration:underline;
  color:#0d47a1;
}

/* SEPARATOR */
.footer-links span{
  color:#aaa;
}

/* COPYRIGHT */
.footer-copy{
  font-size:13px;
  color:#777;
  margin-top:10px;
}

/* BACK TO TOP BUTTON */
#topBtn{
  position:fixed;
  bottom:20px;
  right:20px;

  width:48px;
  height:48px;

  border-radius:50%;
  background:linear-gradient(135deg, #1976d2, #0d47a1);
  color:#fff;
  border:none;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 10px 25px rgba(0,0,0,0.25);
  transition:0.3s;
}

/* 🔥 REAL FIX */
#topBtn i{
  font-size:18px;
  line-height:1;
  display:flex;              /* makes icon behave like a box */
  align-items:center;
  justify-content:center;
  transform:translateY(-1px); /* micro adjust upward */
}


#topBtn:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 15px 35px rgba(0,0,0,0.35);
}