@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
*{margin:0; padding:0; box-sizing:border-box;}
body {background:#f9fafb; color:#333;font-family: "Roboto", Sans-serif;}
.dropdown-item.active, .dropdown-item:active{background-color: #1788d6;}
.dropdown-item:focus, .dropdown-item:hover{color: #1268a3;}
.dropdown-item.active, .dropdown-item:active{background-color: #1788d60a;color: #1788d6;}
.site-header{position: sticky;top: 0;width: 100%;background: #ffffff;z-index: 1000;border-bottom: 1px solid #F3F5F7;}
.logo{font-size: 20px;font-weight: 600;color: #111827;letter-spacing: 1px;max-width: 150px;}
.logo img{width: 100%;}
.contact-btn{background: #1788D6;color: #ffffff;padding: 10px 15px !important;border-radius: 5px;font-size: 16px;font-weight: 500;text-decoration: none;transition: all 0.3s ease;border: 1px solid #1788D6;font-family: inherit;}
.contact-btn:hover{color: #1788D6;background: #ffffff;}
.container{width:100%;max-width:1170px;margin:auto;padding-left: 20px;padding-right: 20px;}

.calc-nav{padding-top: 45px;padding-bottom: 65px;background: #ffffff;border: 1px solid #dbdbdb;border-left:none;border-right:none;}
.calc-list{margin-bottom: 20px;}
.clac-link i{font-size: 25px;}
.clac-link img{width: 40px;display: block;}
.calc-list .clac-link{background: #ffffff;color: #363636;border-radius: 8px;font-size: 18px;font-weight: 600;text-decoration: none;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 125px;text-align: center;padding: 15px;border: 1px solid #E7EBF0;box-shadow: 0px 0px 10px 0px rgb(230 234 239 / 77%) !important;gap: 8px;transition: 0.2s;}
.calc-list .clac-link:hover, .calc-list .clac-link:focus{border-color: rgb(255, 123, 41);}

.hero{padding-top:80px;padding-bottom:80px;background: #FAFBFC;color:#fff;}
.hero-text h1{font-size:42px;margin-bottom:20px;color: #1788d6;}
.hero-text p{font-size:18px;max-width:500px; line-height:1.6;color: #555555;}
.hero-row{display:grid;grid-template-columns:1fr 1fr;align-items: start;gap:40px;}

.form-container{background:#fff;color:#333;padding:30px;border-radius:12px;box-shadow:0 6px 14px rgba(0,0,0,0.1);}
.form-container h2{font-size:22px; margin-bottom:2px; color:#363636;}
.sub{color:#94a3b8;font-size:12px;margin:4px 0 15px}
label{display:grid;gap:6px;font-size:14px;font-weight: 500;margin-bottom:6px;font-family: inherit;}
input,select,button{appearance:none;font-family: inherit;}
input,select{font-size:15px;font-weight: 600;background: #ffffff;border: 1px solid rgb(159 162 173);color: #363636;padding: 14px 10px;border-radius: 10px;outline: none;width: 100%;}
input:focus,select:focus{border-color:#000000;box-shadow:none;}
.card-box .row{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.card-box .col-6{grid-column:span 6;width: 100%;flex: initial !important;}
.card-box .col-4{grid-column:span 4;width: 100%;flex: initial !important;}
.card-box .col-3{grid-column:span 3;width: 100%;flex: initial !important;}
.card-box .col-2{grid-column:span 2;width: 100%;flex: initial !important;}
.card-box .col-12{grid-column:span 12;width: 100%;flex: initial !important;}
.roi .col-2{grid-column: span 4;}
.roi .col-3{grid-column: span 6;}
.pace .col-3{grid-column: span 6;}
.out{display:grid;gap:4px}
.out small{color:#94a3b8}
.out b{font-size:16px}
.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.key{font-size:16px;font-weight:600;padding:10px;border-radius:10px;border: 1px solid rgb(54 54 54 / 24%);background: #f9f9f9;color: #363636;cursor:pointer;}
.warn{color:#f59e0b}.bad{color:#ef4444}.good{color:#22c55e}
.f-group{display: flex;gap: 0px;align-items: center;}

.btn{background: #1788D6;color: #ffffff;padding: 15px;border-radius: 5px;font-size: 16px;font-weight: 600;text-decoration: none;transition: all 0.3s ease;border: 1px solid #1788D6;cursor:pointer;font-family: inherit;}
.btn:hover{background:#1788D6;color: #ffffff;}
.form-container .btn{width:100%;}

.main-heading{font-size:30px;text-align: center;margin-bottom:40px;color:#1e293b;}
.features {padding:70px 40px; text-align:center;background: #ffffff;}
.card-container{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr));gap:25px; max-width:1100px; margin:auto;}
.card{background:#fff; padding:30px; border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.05);transition:0.3s;border: 1px solid rgb(231, 235, 240);}
.card:hover{transform:translateY(-6px); box-shadow:0 6px 16px rgba(0,0,0,0.1);}
.card h3{color:#1788d6; margin-bottom:12px;}

.site-desc {
    text-align: center;
    padding-bottom: 55px;
    padding-top: 90px;
    height: 85vh;
}
.site-desc h3 {
    margin-bottom: 20px;
}

.site-footer{background: #21272A;color: #FFFFFFD6;padding: 25px 20px;font-size: 16px;}
.footer-container{max-width: 1170px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.footer-left{margin-bottom: 8px;}
.footer-right a{color: #FFFFFFD6;text-decoration: none;margin: 0 6px;transition: color 0.3s ease;}
.footer-right a:hover{color: #FFFFFFD6;}

@media(max-width:900px){
  .hero-row{grid-template-columns:1fr;gap: 20px;}
  .hero-text{text-align:center;}
}
@media(max-width:768px){
  nav ul{display:none; flex-direction:column;}
  .hamburger{display:flex;}
  .hero{padding-top: 30px;padding-bottom: 30px;}
  .hero-text h1{font-size: 30px;}
  .form-container{min-width: initial!important;width: 100%;}
}