@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
body {  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; background: #EFEFEF; color: #333; }
.container { width: 90%; max-width: 1200px; margin: auto; padding: 20px; }
footer { font-size: 13px; background-color: #0f0f11; color: white; padding: 0px 0; text-align: center; }
footer a{ color:#FFF; }
header{background-color: #0f0f11}
header h1{float: left; margin:0; padding: 0;}
nav{float: right; padding-top:12px; }
nav ul { list-style-type: none; padding: 0; display: flex; justify-content: center; gap: 20px; }
nav a { color: white; text-decoration: none; font-weight: normal; }
nav a:active, nav a:hover{ text-decoration: underline; }
.top-banner {  padding: 40px 20px; text-align: center; }
.banner-btn { background-color: #333; }
.hero-sec { background:#FFF; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 40px 0; }
.hero-text { max-width: 50%; float: left; }
.hero-image{ float: right; max-width: 50%; }
.hero-image img { max-width: 100%; border-radius: 10px; }
.btn { display: inline-block; padding: 10px 20px; background: #333; color: #fff; text-decoration: none; margin-top: 20px; border-radius: 6px; }
.features-highlight { padding: 40px 0; background-color: #f3f3f3; text-align: center; }
.features-grid { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.feature-card { background: white;padding: 2%;border-radius: 12px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);width: 25%;transition: transform 0.3s ease; }
.feature-card:hover { transform: translateY(-10px); }
.feature-card img { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; margin-bottom: 15px; }
.marketing-section { padding: 40px 0; text-align: center; }
.marketing-columns { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }
.marketing-columns div { width: 300px; background: #fafafa; padding: 20px; border-radius: 8px; box-shadow: 0 0 8px rgba(0,0,0,0.05); }
.callback-section, .newsletter { background-color: #fafafa; padding: 40px 20px; text-align: center; }
.callback-form, .newsletter-form { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.callback-form input, .newsletter-form input { padding: 10px; width: 250px; border-radius: 5px; border: 1px solid #ccc; }
nav .bi{ font-size:0px; cursor: pointer; }
@media screen and (max-width: 900px) {
    .feature-card{ width:70%; }
    nav .bi{color: #FFF;font-size: 37px;}
    nav .bi:hover, nav .bi:active {font-size: 38px;}
    nav.show{ width: 100%;}
    nav ul{ display: none; }
    nav.show ul{ display: block; }
    nav ul li{ display: block; width:100%; text-align: center;padding: 14px; }
}