/* Site Builder — Serene Dark */
.herocontainer { background:#0F0F12; }
#hero {
  background:#0F0F12;
  background-image: radial-gradient(ellipse at 30% 40%, rgba(92,200,170,0.03) 0%, transparent 60%);
  color:#E8E8EC; padding:3rem 2rem; max-width:1140px; margin:0 auto;
  display:flex; flex-direction:row; align-items:center;
}
.half { width:49%; display:inline-block; }
.half h1 { font-size:2.8rem; color:#E8E8EC; font-family:'Sora',sans-serif; font-weight:600; letter-spacing:-0.025em; }
.half h2,.reasonsection h2 { font-size:2.8rem; color:#E8E8EC; font-family:'Sora',sans-serif; font-weight:600; }
.half video { width:100%; padding:1rem; border-radius:20px; }
.half li { font-size:17px; color:#8F8F9D; font-family:'Sora',sans-serif; line-height:1.8; }
.half img { border-radius:20px; }
.subtitle { font-size:20px; color:#8F8F9D; font-family:'Sora',sans-serif; line-height:1.8; }
.calltoaction {
  cursor:pointer; border:0; background:#5CC8AA !important; color:#0F0F12 !important;
  padding:14px 32px; display:block; max-width:212px; font-size:1.1rem;
  text-align:center; margin-top:36px; border-radius:14px;
  font-weight:600; font-family:'Sora',sans-serif; transition:all 0.4s;
}
.calltoaction:hover { background:#7ADAC0 !important; box-shadow:0 0 32px rgba(92,200,170,0.08); }
.installcontainer { background:#161620; padding:5rem 2rem; }
.installsection { max-width:1140px; margin:0 auto; display:flex; flex-direction:row; align-items:center; }
.sectiontext { line-height:1.8; font-size:18px; padding-top:1.5rem; color:#8F8F9D; font-family:'Sora',sans-serif; }
.firsthalf p { padding-right:2rem; }
.reasoncontainer { padding:4rem 2rem; }
.reasonsection { max-width:1140px; margin:0 auto; display:flex; flex-direction:row; align-items:center; margin-bottom:4rem; }
.thirds { max-width:30%; display:inline-block; min-width:400px; }
.thirds img { padding-right:2rem; border-radius:20px; }
.sevents { max-width:69%; display:inline-block; padding-left:1rem; }
.reversed .thirds img { padding-left:2rem; padding-right:0; }
.reversed .sevents { padding-right:1rem; padding-left:0; }
.packagecontainer { background:#161620; padding:3rem 2rem; }
.packagecontainer h2 { font-size:2.2rem; text-align:center; margin-bottom:2rem; color:#E8E8EC; font-family:'Sora',sans-serif; font-weight:600; }
.packagesection { max-width:1140px; margin:0 auto; }
.highlightsection { max-width:1140px; margin:0 auto; padding:4rem 0; }
.highlightcontainer { padding:2rem; }
.padded-boxes { display:flex; flex-wrap:wrap; gap:1.5rem; }
.padded-boxes > * { width:100%; }
.padded-boxes section {
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
  border-radius:20px; transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.padded-boxes section:hover { border-color:rgba(92,200,170,0.25); transform:translateY(-2px); }
.padded { padding:28px 24px; }
.padded-boxes h2 { font-size:1.4rem; line-height:1.5; margin-top:12px; color:#E8E8EC; font-family:'Sora',sans-serif; font-weight:600; }
.padded-boxes p { font-size:1rem; line-height:1.8; color:#8F8F9D; margin-top:8px; font-family:'Sora',sans-serif; }
.padded-boxes img {
  width:44px; height:44px;
  filter:brightness(0) saturate(100%) invert(72%) sepia(30%) saturate(600%) hue-rotate(115deg) brightness(95%) contrast(90%);
}
.extraspace { margin-top:2rem; }
.highlights { margin-left:20px; list-style:none; font-size:17px; color:#8F8F9D; font-family:'Sora',sans-serif; }
.mobileview { display:none; }
.centerized { padding:0 1rem; }

@media screen and (max-width:1250px) {
  #hero,.installsection { flex-direction:column; }
  #hero { padding:1rem; }
  .half { width:100%; }
  #hero .half { text-align:center; }
  .calltoaction { margin-top:20px; margin-left:auto; margin-right:auto; }
  .firsthalf p { padding-right:0; }
  .inside .calltoaction { display:none; visibility:hidden; }
  .mobileview { display:block; margin:30px 0; }
}
@media screen and (max-width:950px) {
  .half h1 { font-size:2rem; }
  .reasonsection { flex-direction:column; }
  .reversed { flex-direction:column-reverse; }
  .reasonsection .thirds,.reasonsection .sevents { max-width:100%; min-width:unset; }
  .thirds img { padding-right:0; }
  .sevents { padding-left:0; }
  .reversed .thirds img { padding-left:0; }
  .reversed .sevents { padding-right:0; }
  .calltoaction { padding:8px 0; max-width:145px; font-size:1rem; }
  .subtitle { font-size:17px; }
}
@media(min-width:768px) { .padded-boxes > * { width:calc((100% - 3rem)/3); } }